微信小程序实现左滑删除

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

项目中的消息列表,和购物车列表需要左滑删除的需求还是挺多的,下面是消息左滑删除的思路和代码实现;

代码思路:

1、在获取到消息列表的时候,给每个消息一个是否显示删除按钮的默认值,全部为false
2、页面上消息列表每一项后面都有一个删除按钮,用transformmargin-leftflex结合使删除按钮隐藏在列表后面,动态绑定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) {
   
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值