微信小程序用JS实现页面左右滑动切换页面

最新推荐文章于 2024-09-10 07:13:08 发布

eduiH

最新推荐文章于 2024-09-10 07:13:08 发布

阅读量1.2w

点赞数 9

分类专栏：功能实现文章标签：小程序 JavaScript 左右滑

本文链接：https://blog.csdn.net/I_am_hardy/article/details/85410103

版权

功能实现专栏收录该内容

10 篇文章 1 订阅

订阅专栏

微信小程序只提供下拉触底和上拉刷新两个功能API要做左右滑动得自己写JS。

思路大概是

在需要滑动操作的容器绑定touchstart，touchmove，touchend三个事件之后在事件处理函数进行相应的判断处理。此处以左右滑动切换tabber页面为例。
首先在需要做滑动处理的容器进行绑定事件

<view bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">此处为需要滑动处理的页面。。。。。。。。</view>

之后在JS文件编写相应的事件处理函数，思路为：设置两个全局变量startDot，touchDot分别存放触屏开始点和正在触屏的点，用于判断滑动的X，Y坐标注意坐标原点位于左上角，不然会左右滑动相反。再设置time，number两个变量用于保存触屏时间和定时器的ID。先绑数据然后触屏相应的点输出控制台看坐标值再做相应的距离判断，在事件处理函数touchStart中读取触屏开始坐标，并打开定时器计时。在事件处理函数touchMove中判断移动的距离和时间是否符合要求符合则做相应的处理（为了保证滑动一次只处理一次需在处理后重置时间time变量和关闭定时器number）。在touchEnd事件处理函数中重置time和关闭定时器number，确保在不符合滑动距离和时间要求时从头计时。

代码

//触屏开始点坐标
var startDot = {
  X: 0,
  Y: 0
};
//触屏到点坐标
var touchDot = {
  X: 0,
  Y: 0
};
var time = 0;  //触屏时间
var number;     //定时器ID
Page({
/**
   * 触屏开始计时和获取坐标
   */
  touchstart: function (event) {
    startDot.X = event.touches[0].pageX;
    startDot.Y = event.touches[0].pageY;
    number = setInterval(function () { time++; }, 100);
  },
  /**
   * 判断滑动距离和时间是否需要切换页面
   */
  touchmove: function (event) {
    touchDot.X = event.touches[0].pageX;
    touchDot.Y = event.touches[0].pageY;
    //向左滑处理
    if ((startDot.X - touchDot.X) > 200 && (startDot.Y - touchDot.Y) < 150 && time < 5 && time > 0.1) {
 	//这里增加向左滑动后的处理
      wx.switchTab({
        url: ''
      });
      clearInterval(number);
      time = 0;
    }
    //向右滑处理
    if ((touchDot.X - startDot.X) > 200 && (touchDot.Y - startDot.Y) < 150 && time < 5 && time > 0.1) {
    //这里增加向右滑动后的处理
      wx.switchTab({
        url: ''
      });
      clearInterval(number);
      time = 0;
    }
  },
  /**
   * 结束触屏重置计时
   */
  touchend: function (event) {
    clearInterval(number);
    time = 0;
  },
})