微信小程序实现左滑删除

最新推荐文章于 2025-08-16 16:20:25 发布

原创

最新推荐文章于 2025-08-16 16:20:25 发布 · 3.7k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序 #javascript

本文介绍了如何在微信小程序中实现左滑删除功能，主要思路包括：设置默认显示删除按钮的状态，利用CSS隐藏删除按钮，通过监听触摸事件判断左滑操作，并动态调整元素显示。代码包括js、HTML和CSS部分。

代码思路：

1、在获取到消息列表的时候，给每个消息一个是否显示删除按钮的默认值，全部为false
2、页面上消息列表每一项后面都有一个删除按钮，用transform和margin-left，flex结合使删除按钮隐藏在列表后面，动态绑定class，当需要显示删除按钮的时候，通过css的transform来显示删除按钮
3、给消息列表和删除按钮的父盒子绑定开始触摸和触摸中事件
4、开始触摸记录用户点击的坐标
5、触摸中里获取用户当前的坐标，和开始坐标比较，查看是否是左滑，来改变消息列表中是否显示删除的值

代码实现：

js

Page({
   
   

  /**
   * 页面的初始数据
   */
  data: {
   
   
    // 消息列表
    msgList: [
      {
   
   
        img: '../../assect/images/img1.jpeg',
        name: '不告诉你我的名字',
        content: '这里是内容呀~~~~'
      },
      {
   
   
        img: '../../assect/images/img1.jpeg',
        name: '不告诉你我的名字',
        content: '这里是内容呀~~~~'
      },
      {
   
   
        img: '../../assect/images/img1.jpeg',
        name: '不告诉你我的名字',
        content: '这里是内容呀~~~~'
      }
    ],

    // 滑动的起始坐标
    startX: 0,
    startY: 0
  },

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

  init() {
   
   
    // 设置是否删除为false
    let {
   
    msgList } = this.data
    msgList.map(i => {
   
   
      i.isMove = false
    })
    this.setData({
   
   
      msgList
    })
  },

  // 开始触摸，记录起始点的坐标
  touchstart(e) {
   
   
    let {
   
    msgLi