wxs 使用方法 左右滑动切换案例

 

 

 

var touchstartX;

 

function handleTouchstart(e){ 

    // 数据绑定 记录触摸开始 x 轴的位置

    touchstartX = e.changedTouches[0].clientX

}

function handleTouchend(e,ownerInstance){ 

     // 把结束时的 x 轴的位置 - 触摸开始的位置

    // 做判断  判断是往左滑还是 往右划

    var touchendX = e.changedTouches[0].clientX

    var distance =   touchstartX  - touchendX;

   

    //  -1 后退（向右滑动）  0 不动 1 前进（向左滑动）

      var direction = 0;

    // 1 前进（向左滑动）

    if(distance < 0 && distance < -70){

         direction = -1

    } 

    //  -1 后退（向右滑动）

     if(distance > 0 && distance > 70){

         direction = 1

    } 

 

   // 做数据绑定 改变 cureentTabIndex 的值

    if(direction !== 0){

        // 1 触发事件  2 直接调用 引用该 wxs 的 页面或者 组件的方法

       ownerInstance.callMethod('handleTouchMove',{direction:direction})

    }

  

}

module.exports = {

    handleTouchstart: handleTouchstart,

    handleTouchend: handleTouchend

}