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


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+html+css实现鼠标移动div实例
Jan 30 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 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
在Ubuntu 14.04上部署 PHP 环境及 WordPress
2014/09/02 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
详解如何webpack使用DllPlugin
2018/09/30 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
python实现的各种排序算法代码
2013/03/04 Python
python中urllib模块用法实例详解
2014/11/19 Python
Python使用sax模块解析XML文件示例
2019/04/04 Python
python如何读取bin文件并下发串口
2019/07/05 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
python爬虫如何解决图片验证码
2021/02/14 Python
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
新加坡第一大健康与美容零售商:屈臣氏新加坡(Watsons Singapore)
2020/12/11 全球购物
有模特经验的简历自我评价
2013/09/19 职场文书
大专毕业生简历的自我评价
2013/10/20 职场文书
员工培训邀请函
2014/02/02 职场文书
节水口号标语
2014/06/19 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
铣工实训报告
2014/11/05 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
教你怎么用Python操作MySql数据库
2021/05/31 Python