uniapp实现页面左右滑动，上下滑动事件

忘是亡心i 2022-11-18 02:29 687阅读 0赞

实现代码：

  1. <view class="" @touchstart="touchstart" @touchend="touchend">
  2. </view>
  4. data() {
  5.     return {
  6.         touchData: {}, //滑动事件数据
  7.     }
  8. }
  9. methods: {
  10.     touchstart(e) {
  11.                 this.touchData.clientX = e.changedTouches[0].clientX;
  12.                 this.touchData.clientY = e.changedTouches[0].clientY;
  13.     },
  14.     touchend(e) {
  15.                 const subX = e.changedTouches[0].clientX - this.touchData.clientX;
  16.                 const subY = e.changedTouches[0].clientY - this.touchData.clientY;
  17.                 if(subY > 50){
  18.                     console.log('下滑')
  19.                 }
  20.                 if(subY < -50){
  21.                     console.log('上滑')
  22.                 }
  23.                 if (subX > 50) {
  24.                     console.log('右滑')
  25.                 }
  26.                 if (subX > -50) {
  27.                     console.log('左滑')
  28.                 }
  29.     },
  30. }

发表评论

表情：
评论列表 （有 0 条评论，687人围观）

还没有评论，来说两句吧...

相关阅读