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


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 相关文章推荐
readonly和disabled属性的区别
Jul 26 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
javascript实现多边形碰撞检测
Oct 24 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/10/09 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
JS中数组重排序方法
2016/11/11 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
Web技术实现移动监测的介绍
2017/09/18 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
Python环境变量设置方法
2016/08/28 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
详解Python模块化编程与装饰器
2021/01/16 Python
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
最好的意大利皮夹克:D’Arienzo
2018/12/04 全球购物
strstr()的简单实现
2013/09/26 面试题
如何定义一个可复用的服务
2014/09/30 面试题
医院实习接收函
2014/01/12 职场文书
党员一句话承诺大全
2014/03/28 职场文书
节能减排倡议书
2014/04/15 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
大学生作弊检讨书
2014/09/11 职场文书
代领报检证委托书范本
2014/10/11 职场文书
销售督导岗位职责
2015/04/10 职场文书
导游词之湖州-太湖
2019/10/11 职场文书