【微信小程序】滑动删除最全Demo,touchstart、touchmove的使用

之前做小程序写过类似APP端的滑动删除功能,由于官方没有提供完整的组件,那咋们就只能自己动手啦,分享一个自己写的滑动删除Demo, 希望可以帮助到大家!

先来看看效果展示:

功能实现使用了微信提供的两个监听事件,touchstart、touchmove来监听用户滑动的过程,并判断滑动的方向,左滑显示删除,右滑隐藏删除按钮。

官方API放这哦事件 | 微信开放文档

功能实现Share:
wxml代码部分:

<view class="list-box">
  <view class="list-row {{delIndex === index ? 'touch-move-active' : ''}}" wx:for="        {{listData}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:key="index">
    <view class="title">{{item}}</view>
    <view class="del-bnt" catchtap="delItem" data-index="{{index}}">删除</view>
  </view>
</view>

JS代码部分:

Page({
    data: {
        listData: [
            '1、我是滑动可删除元素', 
            '2、我是滑动可删除元素', 
            '3、我是滑动可删除元素', 
            '4、我是滑动可删除元素', 
            '5、我是滑动可删除元素'
        ],
        startX: 0, // 开始坐标
        delIndex: -1 // 当前滑动的元素下标位置
    },
    // 删除事件
    delItem (e){
        this.data.listData.splice(e.currentTarget.dataset.index, 1)
        this.setData({
          listData: this.data.listData
        })
    },
    //手指触摸动作开始 记录起点X坐标
    touchstart (e) {
        //开始触摸时 重置所有删除
        this.setData({
          startX: e.changedTouches[0].clientX,
          delIndex: -1
        })
    },
    //滑动事件处理
    touchmove: function (e) {
        let self = this,
        index = e.currentTarget.dataset.index, //当前索引
        startX = self.data.startX, //开始X坐标
        touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标
        delIndex = self.data.delIndex;
        if (touchMoveX > startX) {
          //右滑
          delIndex = -1
        } else {
          //左滑
         delIndex = index
        }
        self.setData({
          delIndex
        })
    }
})

wxss代码部分: 

.list-box{
  width: 100%;
  overflow: hidden;
}
.list-row{
  padding-left: 30rpx;
  height: 130rpx;
  line-height: 130rpx;
  border-bottom: 1rpx solid #e5e5e5;
  position: relative;
  background-color: white;
  white-space: nowrap;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(0px);
  transform: translateX(0px);
}
.title{
  display: inline-block;
  width: 100%;
}
.del-bnt{
  display: inline-block;
  background-color: red;
  color: white;
  width: 200rpx;
  text-align: center;
  height: 100%;
}
.touch-move-active{
  -webkit-transform: translateX(-100px);
  transform: translateX(-100px);
}

  • 28
    点赞
  • 124
    收藏
    觉得还不错? 一键收藏
  • 26
    评论
在JavaScript中,`touchend`, `touchstart`, 和 `touchmove` 这三个事件分别对应触摸屏幕的结束、开始和移动阶段,常用于实现滑动图片或手势操作。下面是一个简要的介绍: 1. `touchstart` (触摸开始):当用户手指接触屏幕并开始滑动时触发,此时你可以获取到触点的坐标(如位置、数量等)以及一些其他触控信息,通常用于初始化滑动状态。 ```javascript function handleTouchStart(e) { var touch = e.touches; startTouchPosition = touch.pageX; // ... 其他初始化操作 } ``` 2. `touchmove` (触摸移动):用户手指在屏幕上持续移动时触发,你可以根据上一次的`touchstart`位置来计算当前的滑动距离。 ```javascript function handleTouchMove(e) { var touch = e.touches; var currentTouchPosition = touch.pageX; var slideDistance = currentTouchPosition - startTouchPosition; // 更新图片位置 moveImage(slideDistance); } ``` 3. `touchend` (触摸结束):当用户抬起手指时触发,这时滑动已经完成,你可以在此时完成相关的动作,比如停止滑动效果,或者处理用户的交互选择。 ```javascript function handleTouchEnd(e) { // 结束滑动动画 stopSlide(); // 可能的后续操作,如图片缩放或切换等 } ``` 在实际应用中,这些事件通常需要在HTML元素上添加`touchstart`, `touchmove`, 和 `touchend` 事件监听器,并且在每个函数内部管理滑动状态和响应行为。记得在处理完事件后清除事件监听,以避免内存泄漏。
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值