• 售前

  • 售后

热门帖子
入门百科

通过滑动翻页效果实现和移动端click变乱题目

[复制链接]
茉莉707 显示全部楼层 发表于 2021-10-25 19:32:39 |阅读模式 打印 上一主题 下一主题
前述

本文很短~
重要是为了总结和讲述移动端click和js变乱机制导致的一个标题。
(:咳咳,其实几句话就能写完的还要水一篇文章,不愧是我…

正文

最近做了一个小运动,里面要用到一个效果:滑动翻页。大概是如许的:
  1. <!-- HTML代码 -->
  2. <div class="page-container">
  3.         <div class="page" style="background: #dc3b26">1</div>
  4.         <div class="page" style="background: #f3b03d">2</div>
  5.         <div class="page" style="background: #44a2f8">3</div>
  6. </div>
复制代码
在css中,首先由于是滑动翻页,所以我们要包管“始终只有一屏”,这个可以放在全局样式表里控制,然后是此中的“每一页”都要占满父元素 —— 这里其实用了“div是块元素,无外力情况下竖直分列”的特性。
  1. /** css样式 */
  2. html,
  3. body{
  4.         margin: 0;
  5.         padding: 0;
  6.         width: 100%;
  7.         height: 100vh;
  8.         overflow: hidden;
  9.         font-size: 60px;
  10. }
  11. .page-container{
  12.         width: 100%;
  13.         height: 100%;
  14. }
  15. .page-container .page{
  16.         width: 100%;
  17.         height: 100%;
  18. }
复制代码
其JS实现也很简单:由于在移动端,所以利用了
  1. touchstart
复制代码
  1. touchmove
复制代码
  1. touchend
复制代码
变乱来实现手势滑动功能:
      
  • start(刚按下)时记载此时的手指位置——作为初始值;  
  • 在move(触摸滑动)时根据及时的手指位置和初始手指位置变量实现要求判断,在本文场景为代表的场景下这一步一般还要求出“移动距离”及时赋值;  
  • 在end(手指脱离)时(也有直接在move时举行的)举行收尾工作——比如:图片滑动完全划已往、元素跑到竣事位置、将变乱监听取消;
  1. // 这里是控制全局js的文件
  2. // 全局阻止浏览器默认行为
  3. document.addEventListener("touchstart",function(e){
  4.         if(e.cancelable){
  5.                 e.preventDefault();
  6.         }
  7. },{passive: false})
  8. // {passive: false}就是告诉前面可能有需要重置行为的代码
  9. document.addEventListener("touchmove",function(e){
  10.         if(e.cancelable){
  11.                 e.preventDefault();
  12.         }
  13. },{passive: false})
复制代码
  1. // JavaScript代码
  2. let curPageIndex=0;
  3. let pageContainer=document.querySelector(".page-container");
  4. let pageNumber=pageContainer.children.length;  //页面的数量
  5. // 文档的视窗高度(这里就是一屏的高度)
  6. let cHeight=document.documentElement.clientHeight;
  7. // 设置页面容器的margin-top为合适的值,让其显示在视野中
  8. function toPage(){
  9.         pageContainer.style.transition="all .5s ease";
  10.         pageContainer.style.marginTop=-curPageIndex*cHeight+"px";
  11.        
  12.         // 变化完成后去掉过渡效果 !
  13.         pageContainer.addEventListener("transitionend",function(){
  14.                 pageContainer.style.transition="none";
  15.         },{once:true})
  16. }
  17. toPage()
  18. pageContainer.ontouchstart=function(e){
  19.         let y=e.changedTouches[0].clientY;  //手指按下的纵坐标
  20.         pageContainer.ontouchmove=function(e){
  21.                 let dis=e.changedTouches[0].clientY-y;  //计算距离
  22.                 // 计算page-container的margin-top
  23.                 let mtop=-curPageIndex*cHeight+dis
  24.                 if(mtop>0){
  25.                         mtop=0;
  26.                 }else if(mtop<-(pageNumber-1)*cHeight){
  27.                         mtop=-(pageNumber-1)*cHeight;
  28.                 }
  29.                 // 实时改变位置
  30.                 pageContainer.style.marginTop=mtop+"px";
  31.         }
  32.         pageContainer.ontouchend=function(e){
  33.                 let dis=e.changedTouches[0].clientY-y;
  34.                 // 如果滑动距离实在太短,就回到滑动前的位置状态
  35.                 if(Math.abs(dis)<=60){
  36.                         toPage()
  37.                 }else if(dis>0 && curPageIndex>0){
  38.                         curPageIndex--;
  39.                         toPage()
  40.                 }else if(dis<0 && curPageIndex<pageNumber-1){
  41.                         curPageIndex++;
  42.                         toPage()
  43.                 }
  44.                
  45.                 // 手指离开后,取消监听事件
  46.                 pageContainer.ontouchmove=null;
  47.                 pageContainer.ontouchend=null;
  48.         }
  49. }
复制代码

至此,功能上好像很完美。但这时间,我们在第一个page里添加一个button:
  1. <div class="page" style="background: #dc3b26">
  2.         <button onclick="alert('哈哈哈')" class="but">click me!</button>
  3.         1
  4. </div>
复制代码
然后到页面上检察效果:

无效!
这是由于在上方全局js文件里我们加了“制止欣赏器默认变乱”的代码。
——在移动端欣赏器中,click变乱和mousestart变乱是同时被触发的。由于移动端欣赏器是没有click变乱的,它是由mouse变乱模拟的! :也正是这个缘故原由,才有了所谓的“移动端欣赏器300ms耽误”的标题 1 。
——尚有就是,在微信自带的欣赏器中,有一个“触顶下拉回弹”的操纵,这其实是不应该的。它也属于欣赏器默认变乱。
所以一般我们需要克制掉这些东西。
但是如上面所示,全部克制掉总会造成一些困扰,怎么办?
H5提供了“自定义属性”,针对本文方法,我们完全可以 —— 在全局变乱里检测当前触发的元素有没有某一个自定义属性,假如有,就什么也不拦截;否则就实行克制默认举动的代码:
比如
  1. <button data-default="true" onclick="alert('哈哈哈')" class="but">click me!</button>
复制代码
将上面“控制全局js的文件”内容改为如下:
  1. // 全局阻止浏览器默认行为
  2. document.addEventListener("touchstart",function(e){
  3.         if(e.target.dataset.default){
  4.                 return;
  5.         }
  6.         if(e.cancelable){
  7.                 e.preventDefault();
  8.         }
  9. },{passive: false})
  10. document.addEventListener("touchmove",function(e){
  11.         if(e.target.dataset.default){
  12.                 return;
  13.         }
  14.         if(e.cancelable){
  15.                 e.preventDefault();
  16.         }
  17. },{passive: false})
复制代码
就OK了:


其实尚有另一种“解法”:既然上面说了,移动端click实际上是通过mouse变乱模拟的,那么我们可以从mousestart变乱入手;又由于button元素是“第一个页面”内的(子)元素,所以可以用制止变乱冒泡
  1. <!-- button就是普通的button -->
  2. <button class="but">click me!</button>
复制代码
  1. document.querySelector(".but").addEventListener("touchstart",function(e){
  2.         e.stopPropagation();
  3.         alert('噶哈哈');
  4. },false)
复制代码
  1. <strong>关于捕获和冒泡→</strong>
  2. 我们首先要知道的是:当我们鼠标按下一个按钮时,并不是“点击了一个按钮”,而是在这个区域内,鼠标(上的按键)被按下,操作系统和浏览器把这个信息对应到了“按钮”所在区域并触发其逻辑。
  3. 事实上鼠标点击并没有位置信息,是操作系统一直在监听鼠标移动,根据累积的位移计算出来的坐标,将其传给浏览器。
  4. 那么,把这个坐标转换为具体的元素上的事件的过程,就可称作“<strong>捕获</strong>”。那“<strong>冒泡</strong>”呢?这个不好解释,但有一点想必你是明白的:当你按下电视开关时,你也按到了电视!
  5. 这就是很多文章会讲到的“冒泡过程由内向外,捕获过程由外向内”,或者说是“洋葱模型”。
  6. 还有一点就是:事件[code]addEventListener
复制代码
的第三个参数
  1. true/false
复制代码
,即为“是捕获/冒泡”。(别多想,这只是欣赏器提供的变乱模型之一。无论是否监听,在一个变乱发生时,捕获和冒泡总是先后发生的)[/code]到此这篇关于滑动翻页效果实现和移动端click变乱标题的文章就先容到这了,更多相关滑动翻页效果内容请搜索草根技术分享从前的文章或继续欣赏下面的相关文章盼望各人以后多多支持草根技术分享!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作