用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:34

作者:kklldog,来自原文地址 微信并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了。原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的 ...

作者:kklldog,来自

原文地址


微信并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了。

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

wxml:

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏