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


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 相关文章推荐
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
react合成事件与原生事件的相关理解
May 13 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使用SAE原生Mail类实现各种类型邮件发送的方法
2016/10/10 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
python如何读写json数据
2018/03/21 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
如何理解python中数字列表
2020/05/29 Python
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
应聘收银员个人的求职信
2013/11/30 职场文书
追悼会子女答谢词
2014/01/28 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014年防汛工作总结
2014/12/08 职场文书
北京天坛导游词
2015/02/12 职场文书
2015年司法所工作总结
2015/04/27 职场文书