微信小程序独家秘笈之左滑删除

水深无声 2022-05-10 00:48 217阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/14056.html][http_www.demodashi.com_demo_14056.html]

#### 一、前期准备工作 ####

软件环境：微信开发者工具  
官方下载地址：[https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html][https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]

##### 1、基本需求。 #####

*  左滑删除
 *  设置默认

##### 2、案例目录结构 #####

![fcqyj2X6LvOu0ZID937.png][]

#### 二、程序实现具体步骤 ####

##### 1.index.wxml代码 #####

##### 2.index.wxss代码 #####

view{
        box-sizing: border-box;
    }
    .item-box{
        width: 700rpx;
        margin: 0 auto;
        padding:40rpx 0;
    }
    .items{
        width: 100%;
    }
    .item{
        position: relative;
        border-top: 2rpx solid #eee;
        height: 120rpx;
        line-height: 120rpx;
        overflow: hidden;
    }
    .item:last-child{
        border-bottom: 2rpx solid #eee;
    }
    .inner{
        position: absolute;
        top:0;
    }
    .inner.txt{
        background-color: #fff;
        width: 100%;
        z-index: 5;
        padding:0 10rpx;
        transition: left 0.2s ease-in-out;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .inner.del{
        background-color: #e64340;
        width: 180rpx;text-align: center;
        z-index: 4;
        right: 0;
        color: #fff
    }
    .item-icon{
        width: 64rpx;
        vertical-align: middle;
        margin-right: 16rpx
    }
    .thumb{
        width: 200px;
        height: 200px;
        -webkit-overflow-scrolling: touch;
        overflow: scroll;
    }

##### 3.index.js逻辑代码 #####

a.部分的功能实现

touchM:function(e){
        if(e.touches.length==1){
          //手指移动时水平方向位置
          var moveX = e.touches[0].clientX;
          //手指起始点位置与移动期间的差值
          var disX = this.data.startX - moveX;
          var delBtnWidth = this.data.delBtnWidth;
          var txtStyle = "";
          if(disX == 0 || disX < 0){//如果移动距离小于等于0，文本层位置不变
            txtStyle = "left:0px";
          }else if(disX > 0 ){//移动距离大于0，文本层left值等于手指移动距离
            txtStyle = "left:-"+disX+"px";
            if(disX>=delBtnWidth){
              //控制手指移动距离最大值为删除按钮的宽度
              txtStyle = "left:-"+delBtnWidth+"px";
            }
          }
          //获取手指触摸的是哪一项
          var index = e.target.dataset.index;
          var list = this.data.list;
          list[index].txtStyle = txtStyle; 
          //更新列表的状态
          this.setData({
            list:list
          });
        }
      },
      touchE:function(e){
        if(e.changedTouches.length==1){
          //手指移动结束后水平位置
          var endX = e.changedTouches[0].clientX;
          //触摸开始与结束，手指移动的距离
          var disX = this.data.startX - endX;
          var delBtnWidth = this.data.delBtnWidth;
          //如果距离小于删除按钮的1/2，不显示删除按钮
          var txtStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:0px";
          //获取手指触摸的是哪一项
          var index = e.target.dataset.index;
          var list = this.data.list;
          list[index].txtStyle = txtStyle;
          //更新列表的状态
          this.setData({
            list:list
          });
        }
      },
      //获取元素自适应后的实际宽度
      getEleWidth:function(w){
        var real = 0;
        try {
          var res = wx.getSystemInfoSync().windowWidth;
          var scale = (750/2)/(w/2);//以宽度750px设计稿做宽度的自适应
          // console.log(scale);
          real = Math.floor(res/scale);
          return real;
        } catch (e) {
          return false;
         // Do something when catch error
        }
      },
      initEleWidth:function(){
        var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
        this.setData({
          delBtnWidth:delBtnWidth
        });
      },
      //点击删除按钮事件
      delItem:function(e){
        //获取列表中要删除项的下标
        var index = e.target.dataset.index;
        var list = this.data.list;
        //移除列表中下标为index的项
        list.splice(index,1);
        //更新列表的状态
        this.setData({
          list:list
        });
      },

#### 三、案例运行效果图 ####

![SJzLTHsksBZktFsy2Pe.gif][]

![adMsjdNlK9rSVAgXF5a.gif][]

#### 四、总结与备注 ####

暂无微信小程序独家秘笈之左滑删除

> 代码地址如下：  
> [http://www.demodashi.com/demo/14056.html][http_www.demodashi.com_demo_14056.html]

> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_14056.html]: http://www.demodashi.com/demo/14056.html
[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[fcqyj2X6LvOu0ZID937.png]: /images/20220510/459326a22cca4dbbba9d20b55de4ad5d.png
[SJzLTHsksBZktFsy2Pe.gif]: /images/20220510/d7b3491efaf84e35a6b049f2bb45f900.png
[adMsjdNlK9rSVAgXF5a.gif]: /images/20220510/20bfb07d9fbe4c6e9354e377a2ae028c.png