十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
微信小程序 实现列表项滑动显示删除按钮的功能
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:空间域名、雅安服务器托管、营销软件、网站建设、李沧网站维护、网站推广。
微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了。
原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位。
wxml:
{{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-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 }); } } );
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!