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


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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
vue form check 表单验证的实现代码
Dec 09 Javascript
5个实用的JavaScript新特性
Jun 16 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
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
JS自动适应的图片弹窗实例
2013/06/29 Javascript
javascript中eval函数用法分析
2015/04/25 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
运用js教你轻松制作html音乐播放器
2020/04/17 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
21行Python代码实现拼写检查器
2016/01/25 Python
深入浅出学习python装饰器
2017/09/29 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
Pycharm+Python工程,引用子模块的实现
2020/03/09 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python远程linux执行命令实现
2020/11/11 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
计算机网络专业推荐信
2013/11/24 职场文书
单位绩效考核方案
2014/05/11 职场文书
英语教师求职信范文
2015/03/20 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
建筑工程催款函
2015/06/24 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python
Win11开始菜单添加休眠选项
2022/04/19 数码科技
Nginx 常用配置
2022/05/15 Servers
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers