微信小程序实现左右滑动功能

最近在用微信的小程序写一个小模块,打算实现一下左右滑动功能,从官方的示例里面没有发现相关代码,便在网上搜了一下,发现好多的大侠将简单的功能说的特复杂,还是我来总结一下自己的实现吧。

WXML代码:

<!--slide.wxml-->
<view class="container" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">
{{content}}
</view>

js代码:


// slide.js
//获取应用实例
const app = getApp();
var startX, endX;
var moveFlag = true;// 判断执行滑动事件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    content:"可以试试左右滑动了"
  },
  touchStart: function (e) {
    startX = e.touches[0].pageX; // 获取触摸时的原点
    moveFlag = true;
  },
  // 触摸移动事件
  touchMove: function (e) {
    endX = e.touches[0].pageX; // 获取触摸时的原点
    if (moveFlag) {
      if (endX - startX > 50) {
        console.log("move right");
        this.move2right();
        moveFlag = false;
      }
      if (startX - endX > 50) {
        console.log("move left");
        this.move2left();
        moveFlag = false;
      }
    }

  },
  // 触摸结束事件
  touchEnd: function (e) {
    moveFlag = true; // 回复滑动事件
    
  },

  move2left() {
    var that = this;
    
    that.setData({
      content: "move2left"
    });
  },
  move2right() {
    var that = this;
    that.setData({
      content: "move2right"
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

WXSS代码:

/* slide.wxss */
page {
  background-color: #fbf9fe;
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  justify-content: space-between;
}

总结

运行效果如下:
初始页面:

image.png

向左滑动:


image.png

向右滑动:


运行一下看看效果吧。

推荐阅读更多精彩内容