• 监听页面的上下左右滑动，作出对应的动作
    1. <template>
    2.     <view
    3.         class="relative"
    4.         @touchmove="handletouchmove"
    5.         @touchstart="handletouchstart"
    6.         @touchend="handletouchend"
    7.     >
    8.     </view>
    9. </template>
    1. export default {
    2.         data () {
    3.             return {
    4.                 flag: 0,
    5.                 text: '',
    6.                 lastX: 0,
    7.                 lastY: 0
    8.             }
    9.         },
    10.         methods: {
    11.             handletouchmove: function(event) {
    12.                 // console.log(event)
    13.                 if (this.flag !== 0) {
    14.                     return;
    15.                 }
    16.                 let currentX = event.touches[0].pageX;
    17.                 let currentY = event.touches[0].pageY;
    18.                 let tx = currentX - this.lastX;
    19.                 let ty = currentY - this.lastY;
    20.                 let text = '';
    21.                 this.mindex = -1;
    22.                 //左右方向滑动
    23.                 if (Math.abs(tx) > Math.abs(ty)) {
    24.                     if (tx < 0) {
    25.                         text = '向左滑动';
    26.                         this.flag = 1;
    27.                         uni.showToast({
    28.                             title: '向左滑动',
    29.                             icon: 'none'
    30.                         })
    31.                     } else if (tx > 0) {
    32.                         text = '向右滑动';
    33.                         this.flag = 2;
    34.                         uni.showToast({
    35.                             title: '向右滑动',
    36.                             icon: 'none'
    37.                         })
    38.                     }
    39.                 }
    40.                 //上下方向滑动
    41.                 else {
    42.                     if (ty < 0) {
    43.                         text = '向上滑动';
    44.                         this.flag = 3;
    45.                         uni.showToast({
    46.                             title: '向上滑动',
    47.                             icon: 'none'
    48.                         })
    49.                     } else if (ty > 0) {
    50.                         text = '向下滑动';
    51.                         this.flag = 4;
    52.                         uni.showToast({
    53.                             title: '向下滑动',
    54.                             icon: 'none'
    55.                         })
    56.                     }
    57.                 }
    59.                 //将当前坐标进行保存以进行下一次计算
    60.                 this.lastX = currentX;
    61.                 this.lastY = currentY;
    62.                 this.text = text;
    63.             },
    64.             handletouchstart: function(event) {
    65.                 this.lastX = event.touches[0].pageX;
    66.                 this.lastY = event.touches[0].pageY;
    67.             },
    68.             handletouchend: function(event) {
    69.                 this.flag = 0;
    70.                 this.text = '没有滑动';
    71.             },
    72.         }
    73.     }
    1. .relative, page {
    2.         width: 750rpx;
    3.         height: 100%;
    4.     }