uniapp nvue页面如何触发手势事件-元素左滑

399 阅读1分钟
<view v-for="(item, index) in deviceList" :key="item.id"
    <view
          @touchstart="start($event,item.id)"
          @touchmove="move"
          @touchend="end"
          :style="[{
                  transform: touch.id == item.id ? 'translateX('+ touch.moveX+'px)': 0							 
                  }]"
          >
    </view>
</view>
export default {
    data() {
        return {
            touch: {
                id:undefined, // 拖动的元素id
                touchStartX: 0, // 触屏起始点x
                moveX: 0 // 移动的距离			
            },
        }
    },

  methods: {
      // 滑动解除绑定
      start(e,id) {
        this.touch.id = id;
        this.touch.touchStartX = e.touches[0].screenX;
      },

      move(e) {
        if( e.touches[0].screenX > this.touch.touchStartX ){ // 不能右滑
          return
        }

        if(this.touch.moveX < -100){ // 左滑不能超过100px
          return
        }
        this.touch.moveX += e.touches[0].screenX - this.touch.touchStartX
        this.touch.touchStartX = e.touches[0].screenX;
      },

      end(e) {
        this.touch.moveX = 0; // 松开回到初始位置
        this.touch.id = undefined;
      },
  }
}