小程序模板网

微信小程序列表项滑动显示删除按钮

发布时间:2018-04-17 09:57 所属栏目:小程序开发教程

作者:kklldog,来自原文地址 
微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了。

原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来移动上层元素,当然上层用绝对定位。

wxml:

 

				
  1. <view class="container">
  2. <view class="record-box" data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record">
  3. <view class="record" style="left:{{record.offsetX}}px" bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd">
  4. <view class="left">
  5. <view>{{record.type}} {{record.count+record.unit}}</view>
  6. <view class="summary">{{record.remark}}</view>
  7. </view>
  8. <view class="right">
  9. {{record.datetime}}
  10. </view>
  11. </view>
  12. <view class="delete-box">
  13. <view>删除</view>


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23525.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询