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

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

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

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

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

wxml：

KSJwcq

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

{{record.remark}}

{{record.datetime}}

删除

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-bottomhttp://: 1rpx solid #ddd;

KSJwcq 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

});

}

}

);

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。