微信滑动删除怎么设置?微信滑动删除实现代码
微信滑动删除怎么设置?微信滑动删除实现代码。怎么实现微信滑动删除的功能,需要用到以下小编整理的微信滑动删除代码。希望以下的内容能解决您的问题。
微信小程序 向左滑动删除功能的实现实现代码:
1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件
{{item.content}}
删除
2、wxss flex布局、css3动画
.touch-item {
font-size: 14px;
display: flex;
justify-content: space-between;
border-bottom:1px solid #ccc;
width: 100%;
overflow: hidden
}
.content {
width: 100%;
padding: 10px;
line-height: 22px;
margin-right:0;
-webkit-transition: all 0.4s;
transition: all 0.4s;
-webkit-transform: translateX(90px);
transform: translateX(90px);
margin-left: -90px
}
.del {
background-color: orangered;
width: 90px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
-webkit-transform: translateX(90px);
transform: translateX(90px);
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
-webkit-transform: translateX(0);
transform: translateX(0);
}
以上是小编整理的微信滑动删除怎么设置的的内容,希望以上内容能对您有帮助。
卖贝商城更多商品介绍:多素材织梦模板 搜狐汽车粤东首页热销软文营销 天津电视台星厨集结号广告代理公司