微信滑动删除怎么设置?微信滑动删除实现代码

微信滑动删除怎么设置?微信滑动删除实现代码。怎么实现微信滑动删除的功能,需要用到以下小编整理的微信滑动删除代码。希望以下的内容能解决您的问题。


  微信小程序 向左滑动删除功能的实现实现代码:


  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);


  }


  以上是小编整理的微信滑动删除怎么设置的的内容,希望以上内容能对您有帮助。




卖贝商城更多商品介绍:多素材织梦模板     搜狐汽车粤东首页热销软文营销    天津电视台星厨集结号广告代理公司