论如何优雅的实现左滑删除（微信小程序）

自衬..

已于 2022-06-20 15:55:31 修改

阅读量1.1k

点赞数 1

文章标签：微信小程序

于 2022-06-20 15:54:43 首次发布

本文链接：https://blog.csdn.net/m0_56530294/article/details/125374443

版权

微信小程序优雅的自定义滑动删除组件

摘要由CSDN通过智能技术生成

效果展示

动画.gif

组件地址

组件已上传至码云，需要可自行下载码云地址

解析需求

WXML结构由一个大盒子包裹两个小盒子 分别为承载数据的展示盒子以及删除盒子
WXSS样式由大盒子负责整体定位居中给一个相对定位,两个子盒子用绝对定位相对于父盒子布局
JS需要给展示盒子绑定三个事件以达到监听所有的触摸滑动操作做出响应,分别为bindtouchstart，bindtouchmove，bindtouchend，通过滑动的x轴的像素点决定调用创建动画方法将盒子位移到目标位置（实现动画的方式由两种一种是用css3的动画，还有就是就是js创建动画，这里选用js的方式创建动画并绑定到dom中的方式实现的原因是css3对于动态数据进行动画方面不如js，如果用css3，那么将会大量的使用setDate刷新dom，在js上只需要重新创建动画即可，性能更佳，同时过渡顺滑）非常优雅~

开始撸代码

这个项目我封装成了一个组件 ,一方面是方便复用,二是抽离解耦内聚方便维护

这里使用一个block遍历 list 以index为key循环渲染卡片，item盒子作为父盒子包裹 box以及delete盒子作为结构，box盒子与item盒子等大，这样修改层级将可以让item盒子覆盖delete盒子

WXML代码部分

<block wx:for="{
  {list}}" wx:key="index">
    <view class="item">
        <view class="box" data-index="{
  {index}}" bindtouchstart='touchstart' bindtouchmove='touchmove' bindtouchend='touchend' animation="{
  {item.aniMation}}">
            <image class="img" mode="aspectFit" src="{
  {item.src}}"></image>
            <view class="msgBox">
                <view class="name">
                    {
  {item.name}}<text class="dutyName">-{
  {item.dutyName}}</text>
                </view>
                <view>{
  {item.phone}}</view>
            </view>
        </view>
        <view class="delete" data-index="{
  {index}}" bindtap="delete">删除</view>
    </view>
</block>

WXSS代码部分

page给个背景色让卡片由对比这里统一使用rpx布局 可以适应不同分辨率的设备,主要采用margin+子绝父相的形式布局,注意的是用z-index控制层级 box层级需要大于delete盒子

page {
   
    background-color: #F5F5F7;
}

.box {
   
    width: 702rpx;
    height: 180rpx;
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    align-items: center;
    padding: 0 24rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    background-color: #fff;
    border: 1rpx solid #fff;
}

.delete {
   
    position: absolute;
    top: 0rpx;
    right: 0rpx;
    z-index: 1;
    width: 180rpx;
    height: 180rpx;
    border-radius: 0 20rpx 20rpx 0;
    background-color: #cd4525;
    color: #fff;
    text-align: center;
    line-height: 180rpx;
}

.img {
   
    width: 120rpx;
    height: 120rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;

}

.msgBox {
   
    display: flex