微信小程序 实现列表项滑动显示删除按钮的功能
微信小程序并没有提供列表控件，所以也没有iOS上惯用的列表项左滑删除的功能，SO只能自己干了。
原理很简单，用2个层，上面的层显示正常的内容，下面的层显示一个删除按钮，就是记录手指滑动的距离，动态的来移动上层元素，当然上层用绝对定位。
wxml：
<view class="container">
<view class="record-box" data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record">
<view class="record" style="left:{{record.offsetX}}px" bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd">
<view class="left">
<view>{{record.type}} {{record.count+record.unit}}</view>
<view class="summary">{{record.remark}}</view>
</view>
<view class="right">
{{record.datetime}}
</view>
</view>
<view class="delete-box">
<view>删除</view>
</view>
</view>
</view>
wxss：
@import "../common/weui.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 detailList = [
{ datetime: '2017-01-01 17:00', count: 100, unit: 'ml', type: '开水', remark: '哈哈哈哈' },
{ datetime: '2017-01-01 17:01', count: 100, unit: 'ml', type: '开水' },
{ datetime: '2017-01-01 17:02', count: 100, unit: 'ml', type: '开水' }
];
var recordStartX = 0;
var currentOffsetX = 0;
Page(
{
data: {
detailList: detailList
}
,
recordStart: function (e) {
recordStartX = e.touches[0].clientX;
currentOffsetX = this.data.detailList[0].offsetX;
console.log('start x ', recordStartX);
}
,
recordMove: function (e) {
var detailList = this.data.detailList;
var item = detailList[0];
var x = e.touches[0].clientX;
var mx = recordStartX - x;
console.log('move x ', mx);
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
});
}
}
);
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“微信小程序 实现列表项滑动显示删除按钮的功能”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。