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


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 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
编程语言JavaScript简介
Oct 16 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
微信小程序 scroll-view的使用案例代码详解
Jun 11 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弹出对话框实现重定向代码
2014/01/23 PHP
php PDO异常处理详解
2016/11/20 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
获取当前点击按钮的id用this.id实现
2014/03/17 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
web打印小结
2017/01/11 Javascript
Ajax基础知识详解
2017/02/17 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
pandas的resample重采样的使用
2020/04/24 Python
Python ORM框架Peewee用法详解
2020/04/29 Python
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
期末自我鉴定
2014/01/23 职场文书
亲子读书活动方案
2014/02/22 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
2015年春节标语口号
2014/12/09 职场文书
学校工会工作总结2015
2015/05/19 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书