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


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 相关文章推荐
javascript 文档的编码问题解决
Mar 01 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
javascript的push使用指南
Dec 05 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
js实现3D旋转效果
Aug 18 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
cnblogs中在闪存中屏蔽某人的实现代码
2010/11/14 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
jQuery表单验证之密码确认
2017/05/22 jQuery
vue实现div拖拽互换位置
2020/07/29 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
JavaScript实现点击图片换背景
2020/11/20 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
Python使用functools模块中的partial函数生成偏函数
2016/07/02 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python生成带有表格的图片实例
2019/02/03 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
十佳少年事迹材料
2014/12/25 职场文书
销售业务员岗位职责
2015/02/13 职场文书
党员自我评价范文2015
2015/03/03 职场文书