小程序实现左滑删除某一项的功能

movableview.wxml

<view wx:for='{{moveList}}' wx:key='index'>
  <movable-area class='movable-area'>
     <movable-view class='movable-view' direction='horizontal'>
        <view bindtouchstart="touchstart" bindtouchmove="touchmove" class='touch-item {{item.isView?"touch-move-active":""}}' data-index='{{index}}' bindtouchstart='touchstart' bindtouchmove='touchmove'>
          <view class='content' bindtap='goDetail'>{{item.text}}</view>
          <view class='del' catchtap='del' data-index='{{index}}'>删除</view>
        </view>
     </movable-view>
  </movable-area>
</view>

movableview.wxss

  .movable-area{
  width: 100%;
  height: 120rpx;
}
.movable-view{
  width: 100%;
  height: 100%;
}
.touch-item {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  border-bottom:1px solid #ccc;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.content {
  width: 100%;
  padding: 10px;
  line-height: 22px;
  margin-right:0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  margin-left: -90px
}
.del {
  background-color: orangered;
  width: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  -webkit-transform: translateX(90px);
  transform: translateX(90px);
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

movableview.js

// pages/movableview/movableview.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
moveList:[],
startX:0,
startY:0
    },
    /**
     * 手指触摸动作开始，记录起始点
     */
    touchstart(e){
        const pageX=e.changedTouches[0].pageX
        const pageY=e.changedTouches[0].pageY;
        // 遍历moveList，把每一项的isView设置为true
        this.data.moveList.forEach((item,index)=>{
           if(item.isView){
            item.isView=false
           }
        })
        this.setData({
            startX:pageX,
            startY:pageY,
            moveList:this.data.moveList
        })
    },
    /**
     * 滑动事件处理
     */
    touchmove(e){
        const pageX=e.changedTouches[0].pageX;//结束时X坐标
        const pageY=e.changedTouches[0].pageY;//结束时Y坐标
        const startX=this.data.startX;//开始时X坐标
        const startY=this.data.startY;//开始时Y坐标
        const that=this
        // 获取华东角度
       const angle=this.angle({X:startX,Y:startY},{X:pageX,Y:pageY})
        // 当前索引
        const index=e.currentTarget.dataset.index
        this.data.moveList.forEach((item,i)=>{
            // 1.如果滑动角度大于30度，直接返回
            //2.如果开始位置小于结束位置，说明时向右滑动
        
            if(Math.abs(angle>30)){
            return
            }
            if(i==index){
                if(that.data.startX<pageX){//右滑
                    item.isView=false
                }else{
                    //左滑
                    item.isView=true
                }
            }
        })  
        this.setData({
            moveList:this.data.moveList
        })      
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
        let moveList=[]
        for(let i=0;i<10;i++){
            this.data.moveList.push({
                text:'向左滑动删除向左滑动删除向左滑动删除向左滑动删除向左滑动删除向左滑动删除向左滑动删除向左滑动删除向左滑动删除向左滑动删除向左滑动删除向左滑动删除',
                isView:false,
                id:i
            })
            this.setData({
                moveList:moveList
            })
        }
    },
  /**
   * 计算角度的函数
   */
  angle:function(start,end){
      var _X=start.X-end.X;
      var _Y=start.Y-end.Y;
    //   返回角度 /Math.atan()返回数字的反正切值
    return 360*Math.atan(_Y/_X)/(2*Math.PI)
  }
})

效果如下所示:

左滑删除功能.png

当我们向左滑动某一项的时候，这一行的删除按钮就会出现，我们就可以给她绑定事件来进行删除的操作了