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


Posted in Javascript onApril 13, 2017

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

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

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

wxml:

<view class="container">
 <view class="record-box" data-datetime="{{record.datetime}}" wx:for="{{detailList}}" wx:for-item="record">
  <view class="record" style="left:{{record.offsetX}}px" bindtouchstart="recordStart" catchtouchmove="recordMove" bindtouchend="recordEnd">
   <view class="left">
    <view>{{record.type}} {{record.count+record.unit}}</view>
    <view class="summary">{{record.remark}}</view>
   </view>
   <view class="right">
    {{record.datetime}}
   </view>
  </view>
  <view class="delete-box">
   <view>删除</view>
  </view>
 </view>
</view>

 wxss:

@import "../common/weui.wxss";
 
.container {
 box-sizing: border-box;
 padding: 0 0 0 0;
}
 
 
 
.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: 1rpx solid #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代码:

var detailList = [
  { datetime: '2017-01-01 17:00', count: 100, unit: 'ml', type: '开水', remark: '哈哈哈哈' },
  { datetime: '2017-01-01 17:01', count: 100, unit: 'ml', type: '开水' },
  { datetime: '2017-01-01 17:02', count: 100, unit: 'ml', type: '开水' }
];
var recordStartX = 0;
var currentOffsetX = 0;
Page(
  {
    data: {
      detailList: detailList
    }
    ,
    recordStart: function (e) {
      recordStartX = e.touches[0].clientX;
      currentOffsetX = this.data.detailList[0].offsetX;
      console.log('start x ', recordStartX);
    }
    ,
    recordMove: function (e) {
      var detailList = this.data.detailList;
      var item = detailList[0];
      var x = e.touches[0].clientX;
      var mx = recordStartX - x;
      console.log('move x ', mx);

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

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

      } else {
        item.offsetX = 0;

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

  }
);

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

Javascript 相关文章推荐
jquery tools系列 expose 学习
Sep 06 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
通过jQuery源码学习javascript(二)
Dec 27 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
纯js实现html转pdf的简单实例(推荐)
Feb 16 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
js实现时钟定时器
Mar 26 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
微信小程序 动态绑定事件并实现事件修改样式
Apr 13 #Javascript
Bootstrap实现各种进度条样式详解
Apr 13 #Javascript
微信小程序 本地数据存储实例详解
Apr 13 #Javascript
从零开始学习Node.js系列教程之设置HTTP头的方法示例
Apr 13 #Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 #Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
Apr 13 #Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 #Javascript
You might like
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
php使用递归函数实现数字累加的方法
2015/03/16 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
iframe窗口高度自适应的实现方法
2014/01/08 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
javascript json对象小技巧之键名作为变量用法分析
2019/11/11 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
python求众数问题实例
2014/09/26 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python获取当前函数名称方法实例分享
2018/01/18 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
Pandas —— resample()重采样和asfreq()频度转换方式
2020/02/26 Python
python实现坦克大战
2020/04/24 Python
年度考核自我评价
2014/01/25 职场文书
给国外客户的邀请函
2014/01/30 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers