微信小程序左滑删除实现代码实例


Posted in Javascript onSeptember 16, 2019

这篇文章主要介绍了微信小程序左滑删除实现代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

<view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" wx:for="{{list}}" wx:key>
<view class="content">


<view style="{{item.txtStyle}}" class='item' data-index='{{index}}' bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchE">


<view class='title'>{{item.title}}</view>


<text>{{item.create_time}}</text>

</view>
</view>

<view class="del" data-id="{{item.id}}" catchtap="delBtn" data-index="{{index}}">删除</view>
</view>
.touch-item {
display: flex;

justify-content: space-between;

width: 100%;

overflow: hidden;

margin-bottom: 10rpx;

background: #f5f5f5;

height: 216rpx;
}

.content {

width: 100%;

margin-right: 0;

-webkit-transition: all 0.4s;

transition: all 0.4s;

-webkit-transform: translateX(90px);

transform: translateX(90px);

margin-left: -90px;
}

.del {

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;

font-size: 35rpx;
}

.touch-move-active .content, .touch-move-active .del {

-webkit-transform: translateX(0);

transform: translateX(0);
}
// pages/touch/touch.js
Page({

  /**
* 页面的初始数据
*/
  data: {
    startX: 0,
    //开始坐标
    startY: 0,
    page: 1,
    list: [{
      id: 0,
      title: '标题1',
      create_time: '2019-09-06'
    },
    {
      id: 1,
      title: '标题2',
      create_time: '2019-09-06'
    },
    {
      id: 2,
      title: '标题3',
      create_time: '2019-09-06'
    },
    ]
  },
  touchE: function(e) {
    // console.log(e);
    var that = this
    if (e.changedTouches.length == 1) {
      //手指移动结束后触摸点位置的X坐标
      var endX = e.changedTouches[0].clientX;
      //触摸开始与结束,手指移动的距离
      var disX = that.data.startX - endX;
      var delBtnWidth = that.data.delBtnWidth;
      //如果距离小于删除按钮的1/2,不显示删除按钮
      var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx": "left:0rpx";

      //获取手指触摸的是哪一项
      var index = e.currentTarget.dataset.index;
      var list = that.data.list;
      list[index].txtStyle = txtStyle;
      //更新列表的状态
      that.setData({
        list: list
      });
    }
  },
  //手指触摸动作开始 记录起点X坐标
  touchstart: function(e) {
    //开始触摸时 重置所有删除
    this.data.list.forEach(function(v, i) {
      if (v.isTouchMove) //只操作为true的
      v.isTouchMove = false;
    }) this.setData({
      startX: e.changedTouches[0].clientX,
      startY: e.changedTouches[0].clientY,
      list: this.data.list
    })
  },
  //滑动事件处理
  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.list.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({
      list: that.data.list
    })
  },
  /**
* 计算滑动角度
* @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);
  },
  /**
* 生命周期函数--监听页面加载
*/
  onLoad: function(options) {
},
  /**
* 生命周期函数--监听页面初次渲染完成
*/
  onReady: function() {
},
  /**
* 生命周期函数--监听页面显示
*/
  onShow: function() {
},
  /**
* 生命周期函数--监听页面隐藏
*/
  onHide: function() {
},
  /**
* 生命周期函数--监听页面卸载
*/
  onUnload: function() {
},
  /**
* 页面相关事件处理函数--监听用户下拉动作
*/
  onPullDownRefresh: function() {
},
  /**
* 页面上拉触底事件的处理函数
*/
  onReachBottom: function() {
},
  /**
* 用户点击右上角分享
*/
  onShareAppMessage: function() {
}
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
Jul 15 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
Aug 02 Javascript
Vue组件通信之Bus的具体使用
Dec 28 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 #Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 #Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 #Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 #Javascript
layui使用templet格式化表格数据的方法
Sep 16 #Javascript
layui监听单元格编辑前后交互的例子
Sep 16 #Javascript
基于Vue.js与WordPress Rest API构建单页应用详解
Sep 16 #Javascript
You might like
谈谈新手如何学习PHP
2006/12/14 PHP
wordpress之wp-settings.php
2007/08/17 PHP
PHP生成Flash动画的实现代码
2010/03/12 PHP
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
关于尾递归的使用详解
2013/05/02 PHP
php5.3 goto函数介绍和示例
2014/03/21 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
smarty模板引擎使用内建函数foreach循环取出所有数组值的方法
2015/01/22 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
jquery判断类型是不是number类型的实例代码
2016/10/07 Javascript
js获取浏览器和屏幕的各种宽度高度
2017/02/22 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
Django与JS交互的示例代码
2017/08/23 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
python对视频画框标记后保存的方法
2018/12/07 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
django 信号调度机制详解
2019/07/19 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
wxPython实现文本框基础组件
2019/11/18 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
高三自我鉴定
2013/10/23 职场文书
2015年语文教师工作总结
2015/05/25 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
高中体育课教学反思
2016/02/16 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
MySQL系列之十五 MySQL常用配置和性能压力测试
2021/07/02 MySQL
Java 使用类型为Object的变量指向任意类型的对象
2022/04/13 Java/Android