微信小程序 向左滑动删除功能的实现


Posted in Javascript onMarch 10, 2017

微信小程序 向左滑动删除功能的实现

实现效果图:

微信小程序 向左滑动删除功能的实现

实现代码:

1、wxml touch-item元素绑定了bindtouchstart、bindtouchmove事件

<view class="container">
 <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove" wx:for="{{items}}" wx:key="">
  <view class="content">{{item.content}}</view>
  <view class="del" catchtap="del" data-index="{{index}}">删除</view>
 </view>
</view>

2、wxss flex布局、css3动画

.touch-item {
 font-size: 14px;
 display: flex;
 justify-content: space-between;
 border-bottom:1px solid #ccc;
 width: 100%;
 overflow: hidden
}
.content {
 width: 100%;
 padding: 10px;
 line-height: 22px;
 margin-right:0;
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
 -webkit-transform: translateX(90px);
 transform: translateX(90px);
 margin-left: -90px
}
.del {
 background-color: orangered;
 width: 90px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 color: #fff;
 -webkit-transform: translateX(90px);
 transform: translateX(90px);
 -webkit-transition: all 0.4s;
 transition: all 0.4s;
}
.touch-move-active .content,
.touch-move-active .del {
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

3、js 注释很详细

var app = getApp()
Page({
 data: {
  items: [],
  startX: 0, //开始坐标
  startY: 0
 },
 onLoad: function () {
  for (var i = 0; i < 10; i++) {
   this.data.items.push({
    content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",
    isTouchMove: false //默认全隐藏删除
   })
  }
  this.setData({
   items: this.data.items
  })
 },
 //手指触摸动作开始 记录起点X坐标
 touchstart: function (e) {
  //开始触摸时 重置所有删除
  this.data.items.forEach(function (v, i) {
   if (v.isTouchMove)//只操作为true的
    v.isTouchMove = false;
  })
  this.setData({
   startX: e.changedTouches[0].clientX,
   startY: e.changedTouches[0].clientY,
   items: this.data.items
  })
 },
 //滑动事件处理
 touchmove: function (e) {
  var that = this,
   index = e.currentTarget.dataset.index,//当前索引
   startX = that.data.startX,//开始X坐标
   startY = that.data.startY,//开始Y坐标
   touchMoveX = e.changedTouches[0].clientX,//滑动变化坐标
   touchMoveY = e.changedTouches[0].clientY,//滑动变化坐标
   //获取滑动角度
   angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
  that.data.items.forEach(function (v, i) {
   v.isTouchMove = false
   //滑动超过30度角 return
   if (Math.abs(angle) > 30) return;
   if (i == index) {
    if (touchMoveX > startX) //右滑
     v.isTouchMove = false
    else //左滑
     v.isTouchMove = true
   }
  })
  //更新数据
  that.setData({
   items: that.data.items
  })
 },
 /**
  * 计算滑动角度
  * @param {Object} start 起点坐标
  * @param {Object} end 终点坐标
  */
 angle: function (start, end) {
  var _X = end.X - start.X,
   _Y = end.Y - start.Y
  //返回角度 /Math.atan()返回数字的反正切值
  return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
 },
 //删除事件
 del: function (e) {
  this.data.items.splice(e.currentTarget.dataset.index, 1)
  this.setData({
   items: this.data.items
  })
 }
})

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

Javascript 相关文章推荐
DOM精简教程
Oct 03 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
Javascript玩转继承(三)
May 08 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
jquery拖拽效果完整实例(附demo源码下载)
Jan 14 Javascript
深入浅析JavaScript中with语句的理解
May 12 Javascript
JavaScript 最佳实践:帮你提升代码质量
Dec 03 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
vue实现日历备忘录功能
Sep 24 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
常用的js方法合集
Mar 10 #Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 #Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 #Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 #Javascript
js实现产品缩略图效果
Mar 10 #Javascript
BootStrap注意事项小结(五)表单
Mar 10 #Javascript
微信小程序 弹框和模态框实现代码
Mar 10 #Javascript
You might like
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
javascript实现京东登录显示隐藏密码
2020/08/02 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python高级用法总结
2018/05/26 Python
python3.4实现邮件发送功能
2018/05/28 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
Crucial英睿达法国官网:内存条及SSD固态硬盘升级
2018/07/13 全球购物
俄罗斯玩具、儿童用品、儿童服装和鞋子网上商店:MyToys.ru
2019/10/14 全球购物
简历中求职的个人自我评价
2013/12/03 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
善意的谎言事例
2014/02/15 职场文书
小学老师对学生的评语
2014/12/29 职场文书
警告通知
2015/04/25 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
Python中npy和mat文件的保存与读取
2022/04/24 Python
Beekeeper Studio开源数据库管理工具比Navicat更炫酷
2022/06/21 数据库