微信小程序购物车左移删除

傷城~ 2022-06-02 04:19 237阅读 0赞

需求：在原本购物车的编辑选中删除的基础上，增加左移删除。

查看Api文档和搜索了解到：bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" 三个绑定事件。

打印事件：

![20180103132653340][]

查看网上的demo,都是分层，使用绝对定位，但是我自己的项目需求是在原有的基础上进行开发(最初的布局是使用flex布局,再换样式太过复杂)，所以自己是

.row{
      display: flex;
      flex-direction: row;

}

然后删除按钮使用 display:none 来隐藏。左滑之后display变成flex

![20180103133427386][]

页面

<view class='row'>
            <view data-index='{
       {index}}' style="background:#fff;margin-top:2rpx;padding:20rpx;display:flex;align-items:center;width:100%;{
       {list[index].Style}}

" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE">
             //中间无关部分去掉
            </view>
            <view style='color:#fff;justify-content: center; align-items: center;width:150rpx; background:red;{
       {list[index].txtStyle}}' bindtap="deleteProd">删除</view>
          </view>

//手指刚放到屏幕触发
      touchS: function (e) {
        console.log( e);
        //判断是否只有一个触摸点
        // console.log(e.touches[0].clientX)
        if (e.touches.length == 1) {
          this.setData({
            //记录触摸起始位置的X坐标
            startX: e.touches[0].clientX
          });
        }
      },
      //触摸时触发，手指在屏幕上每移动一次，触发一次
      touchM: function (e) {
          // console.log("touchM:" + e);
          var that = this
          var index = e.currentTarget.dataset.index;
          if (e.touches.length == 1) {
            //记录触摸点位置的X坐标
            var moveX = e.touches[0].clientX;
            //计算手指起始点的X坐标与当前触摸点的X坐标的差值
            var disX = that.data.startX - moveX;
            //delBtnWidth 为右侧按钮区域的宽度
            var delBtnWidth = that.data.delBtnWidth;
            var txtStyle = "";
            if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变
              txtStyle = "left:0px";
            } else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离
              txtStyle = "margin-left:-" + disX + "px";
              if (disX >= delBtnWidth) {
                //控制手指移动距离最大值为删除按钮的宽度
                txtStyle = "margin-left:-" + delBtnWidth + "px";
              }
              var txt = disX > delBtnWidth / 2 ? "display:flex " : "display:none";
              that.data.list[index].Style = txtStyle;
              that.data.list[index].txtStyle = txt;
              //获取手指触摸的是哪一项
              that.setData({
                list: that.data.list,
                index: index,
              })
              console.log(that.data.list);
            }
          }
      },
      touchE: function (e) {
        var that = this
        that.clearDelete()
        console.log("下标" + e.currentTarget.dataset.index);
        var index = e.currentTarget.dataset.index;
        console.log(that.data.index)
    
        if (e.changedTouches.length == 1) {
          //手指移动结束后触摸点位置的X坐标
          var endX = e.changedTouches[0].clientX;
          //触摸开始与结束，手指移动的距离
          var disX = that.data.startX - endX;
          var delBtnWidth = that.data.delBtnWidth;
          //如果距离小于删除按钮的1/2，不显示删除按钮
          var sty = disX > delBtnWidth / 2 ? "margin-left:-" + 150 + "rpx" : "left:0px";
          var txt = disX > delBtnWidth / 2 ? "display:flex " : "display:none";
          that.data.list[index].Style = sty;
          that.data.list[index].txtStyle = txt;
          //获取手指触摸的是哪一项
          that.setData({
            list: that.data.list,
            index: index,
          })
          console.log(that.data.list);
        }
      },
      clearDelete:function(){ //移动其他商品时，当前商品删除none
        for (var i = 0; i < this.data.shoppingCarList.length;i++){
          this.data.list[i].Style = "left:0px";
          this.data.list[i].txtStyle = "display:none";
        }
        this.setData({
          list: this.data.list,
        })
      }

更多文章请关注公众号：每天学Java。想获得更多最新面试提醒请进入小程序：每天学Java

小程序交流群二维码：                                                                                          小程序二维码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQyMjcwNjM2_size_16_color_FFFFFF_t_70][]             ![70][]

[20180103132653340]: /images/20220602/5d610ea5ae9d4ac69b20d23b6cc4dc46.png
[20180103133427386]: /images/20220602/369f4baf9fa345a2908ccc4a11996457.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQyMjcwNjM2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190904110658950.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxNDQyMjcwNjM2,size_16,color_FFFFFF,t_70
[70]: /images/20220602/8a8229f7745f4065889239a191fdfd98.png