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


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 相关文章推荐
js给dropdownlist添加选项的小例子
Mar 04 Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 Javascript
ext combobox动态加载数据库数据(附前后台)
Jun 17 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
Vue渲染过程浅析
Mar 14 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
smarty简单分页的实现方法
2014/10/27 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
yii2中LinkPager增加总页数和总记录数的实例
2017/08/28 PHP
javascript 星级评分效果(手写)
2012/12/24 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jquery easyui使用心得
2014/07/07 Javascript
JS实现图片放大镜效果的方法
2015/02/27 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
JS原生瀑布流效果实现
2019/04/26 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
Django 内置权限扩展案例详解
2019/03/04 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
优秀党员获奖感言
2014/02/18 职场文书
李敖北大演讲稿
2014/05/24 职场文书
装饰公司活动策划方案
2014/08/23 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
红色影片观后感
2015/06/18 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
MySQL 数据库范式化设计理论
2022/04/22 MySQL
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers