微信小程序实现列表项滑动显示删除按钮的功能

发布时间：2020-12-14 20:18:30 所属栏目：资源来源：网络整理

导读：微信小程序实现列表项滑动显示删除按钮的功能微信小程序并没有提供列表控件，所以也没有iOS上惯用的列表项左滑删除的功能，SO只能自己干了。原理很简单，用2个层，上面的层显示正常的内容，下面的层显示一个删除按钮，就是记录手指滑动的距离，动态的来移

微信小程序实现列表项滑动显示删除按钮的功能

微信小程序并没有提供列表控件，所以也没有iOS上惯用的列表项左滑删除的功能，SO只能自己干了。

原理很简单，用2个层，上面的层显示正常的内容，下面的层显示一个删除按钮，就是记录手指滑动的距离，动态的来移动上层元素，当然上层用绝对定位。

wxml：

{{record.type}} {{record.count+record.unit}} 删除

　wxss：

.container {
box-sizing: border-box;
padding: 0 0 0 0;
}

.record {
display: flex;
flex-direction: row;
align-items: center;
width:100%;
height: 120rpx;
position: absolute;
justify-content: space-between;
background-color: #fff;
}

.record .right{
margin-right: 30rpx;
color: #888888;
}
.record .left{
margin-left: 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}

.record .left .summary{
color: #aaa;
font-size: 30rpx;
line-height: 30rpx;

}

.record-box{
height: 120rpx;
width: 100%;
border-bottom: 1rpx solid #ddd;
background-color: #fff;
}

.delete-box{
background-color: #e64340;
color: #ffffff;
float: right;
height: 100%;
width: 80px;
display: flex;
align-items: center;
justify-content: center;
}

.record-box:last-child {
border-bottom: 0;
}

.record .r-item {

}
　　

JS代码：

  var result = currentOffsetX - mx;
  if (result >= -80 && result <= 0) {
    item.offsetX = result;
  }
  this.setData({
    detailList: detailList
  });
},recordEnd: function (e) {
  var detailList = this.data.detailList;
  var item = detailList[0];
  console.log('end x ',item.offsetX);

  if (item.offsetX < -40) {
    item.offsetX = -80;

  } else {
    item.offsetX = 0;

  }
  this.setData({
    detailList: detailList
  });
}

}
);

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

微信小程序 实现列表项滑动显示删除按钮的功能