zoukankan      html  css  js  c++  java
  • h5 左右滑动切换tab栏

     1             on: {
     2                 touchstart(e){
     3                     e.preventDefault();
     4                     var touch = e.touches[0];
     5                     startX = touch.pageX;
     6                     startT = new Date().getTime(); //记录手指按下的开始时间
     7                     // isMove = false; //是否产生滑动
     8                 },
     9                 touchmove(e){
    10                     // console.log('touchmove', e);
    11                     e.preventDefault();
    12                     var touch = e.touches[0];
    13                     var deltaX = touch.pageX - startX;
    14                 },
    15                 touchend(e){
    16                     // console.log(e)
    17                     var touch = e.changedTouches[0]
    18                     var endX = touch.pageX
    19                     
    20                     var index = me.list.indexOf(me.value)
    21 
    22 
    23                     var deltaT = new Date().getTime() - startT;
    24                     
    25                     var deltaX = touch.pageX - startX;
    26                     if (deltaT < 300){
    27                         if (deltaX > 0){
    28                             console.log('index', index);
    29                             
    30                             if (index === 0) {
    31                                 index = me.list.length
    32                             }
    33                             me.$emit("input", me.list[--index])
    34                         } else if (deltaX < 0) {
    35 
    36                             if (index === me.list.length - 1) {
    37                                 index = -1
    38                             }
    39                             me.$emit("input", me.list[++index])
    40                             console.log('index', index);
    41                             
    42                         }
    43                     } else {
    44 
    45                         if (deltaX > bodyWidth * 0.5){
    46                             console.log('index', index);
    47                             
    48                             if (index === 0) {
    49                                 index = me.list.length
    50                             }
    51                             me.$emit("input", me.list[--index])
    52                         } else if (deltaX < -bodyWidth * 0.5) {
    53 
    54                             if (index === me.list.length - 1) {
    55                                 index = -1
    56                             }
    57                             me.$emit("input", me.list[++index])
    58                             console.log('index', index);
    59                             
    60                         }
    61                     }
    62                     
    63                         
    64                     me._getActiveNav()
    65                 }
    66             }
  • 相关阅读:
    jquery和js常用的遍历数组的方法
    jquery获取某组件距离边框的距离
    jquery获取鼠标移动时的位置
    springboot整合websocket实现登录挤退现象
    使用Gitblit搭建Git服务器教程
    Gradle史上最详细解析
    推荐5个提高Java开发效率的工具
    JBoss7详细配置指南
    XMLBEANS的使用总结
    使用XMLBeans 处理XML
  • 原文地址:https://www.cnblogs.com/summer0319/p/8422318.html
Copyright © 2011-2022 走看看