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             }
  • 相关阅读:
    js图片放大
    js编写点名器
    javascript中的math和随机数
    python中 __slots__
    python中 @property
    CentOS 6.5通过yum安装 MySQL-5.5
    linux下环境搭建
    oracle:ORA-01940无法删除当前已连接用户的解决方案
    不同版本apache(免安装)下部署Javaee多套项目
    使用poi处理excel
  • 原文地址:https://www.cnblogs.com/summer0319/p/8422318.html
Copyright © 2011-2022 走看看