<强>微信小程序实现列表项滑动显示删除按钮的功能
微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,所以只能自己干了。
原理很简单,用2个层,上面的层显示正常的内容、下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位。
<强> wxml:
& lt;视图类=叭萜鳌北?
& lt;视图类="记录框" data-datetime="{{记录。datetime}} "天气:=" {{detailList}}记录“天气:项=比;
& lt;视图类="记录" bindtouchstart=皉ecordStart catchtouchmove”=皉ecordMove”bindtouchend=皉ecordEnd”比;
& lt;视图类=白蟆北?
& lt; view>{{记录。类型}}{{record.count + record.unit}} & lt;/view>
& lt;视图类=白芙帷痹趝{record.remark}} & lt;/view>
& lt;/view>
& lt;视图类=罢贰钡淖４?
{{record.datetime}}
& lt;/view>
& lt;/view>
& lt;视图类=癲elete-box”比;
& lt; view>删除& lt;/view>
& lt;/view>
& lt;/view>
& lt;/view>
之前
<强> wxs:
@ import“. ./共同/weui.wxss”;
.container {
box-sizing: border-box;
填充:0 0 0 0;
}
知根知底{
显示:flex;
flex-direction:行;
对齐项目:中心;
宽度:100%;
身高:120 rpx;
位置:绝对的;
justify-content:之间的空间;
background - color: # fff;
}
知根知底铃声{
margin-right: 30 rpx;
颜色:# 888888;
}
知根知底.left {
margin-left: 30 rpx;
显示:flex;
flex-direction:列;
justify-content:之间的空间;
}
知根知底.left .summary {
颜色:# aaa级;
字体大小:30 rpx;
行高:30 rpx;
}
.record-box {
身高:120 rpx;
宽度:100%;
边界底部:1 rpx固体# ddd;
background - color: # fff;
}
.delete-box {
background - color: # e64340;
颜色:# ffffff;
浮:正确;
高度:100%;
宽度:80 px;
显示:flex;
对齐项目:中心;
justify-content:中心;
}
.record-box:胎{
边界底部:0;
}
知根知底.r-item {
}
之前
<强> JS代码:
var detailList=[
{datetime: 2017-01-01 17点,数:100,单位:毫升,类型:“开水”,注:“哈哈哈哈'},
{datetime: 2017-01-01 17:01,数:100,单位:毫升,类型:“开水”},
{datetime: 2017-01-01 17:02,数:100,单位:毫升,类型:“开水'}
];
var recordStartX=0;
var currentOffsetX=0;
页面(
{
数据:{
detailList: detailList
}
，
recordStart:函数(e) {
recordStartX=e.touches [0] .clientX;
currentOffsetX=this.data.detailList [0] .offsetX;
控制台。日志(' x '开始,recordStartX);
}
，
recordMove:函数(e) {
var detailList=this.data.detailList;
var项=detailList [0];
var x=e.touches [0] .clientX;
var mx=recordStartX - x;
控制台。日志(' x '移动,mx);=currentOffsetX - mx var结果;
如果结果祝辞=-80,,结果& lt;=0) {
项。offsetX=结果;
}
this.setData ({
detailList: detailList
});
}
，
recordEnd:函数(e) {
var detailList=this.data.detailList;
var项=detailList [0];
控制台。日志(' x '结束,item.offsetX);
如果项目。offsetX & lt;-40){
项。offsetX=-80;
其他}{
项。offsetX=0;
}
this.setData ({
detailList: detailList
});
}
}
);
之前
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
