好资源导航 » 文章资讯 » 微信小程序实现列表项滑动显示删除按钮的功能

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

2024-02-25 17:32:03 146

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

微信小程序并没有提供列表控件，所以也没有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:0000;
}



.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:1rpxsolid#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代码：

vardetailList=[
{datetime:'2017-01-0117:00',count:100,unit:'ml',type:'开水',remark:'哈哈哈哈'},
{datetime:'2017-01-0117:01',count:100,unit:'ml',type:'开水'},
{datetime:'2017-01-0117:02',count:100,unit:'ml',type:'开水'}
];
varrecordStartX=0;
varcurrentOffsetX=0;
Page(
{
data:{
detailList:detailList
}
,
recordStart:function(e){
recordStartX=e.touches[0].clientX;
currentOffsetX=this.data.detailList[0].offsetX;
console.log('startx',recordStartX);
}
,
recordMove:function(e){
vardetailList=this.data.detailList;
varitem=detailList[0];
varx=e.touches[0].clientX;
varmx=recordStartX-x;
console.log('movex',mx);

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

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

}else{
item.offsetX=0;

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

}
);

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐

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