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


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 相关文章推荐
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
javascript实现图片轮播效果
Jan 20 Javascript
VC调用javascript的几种方法(推荐)
Aug 09 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 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
玩转虚拟域名◎+ .
2006/10/09 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
四个PHP非常实用的功能
2015/09/29 PHP
ECMAScript 基础知识
2007/06/29 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
Javascript oop设计模式 面向对象编程简单实例介绍
2016/12/13 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
2019/08/07 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python中计算三角函数之cos()方法的使用简介
2015/05/15 Python
python计算文本文件行数的方法
2015/07/06 Python
python编程实现归并排序
2017/04/14 Python
详解python eval函数的妙用
2017/11/16 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python: tkinter窗口屏幕居中,设置窗口最大,最小尺寸实例
2020/03/04 Python
Python中logger日志模块详解
2020/08/04 Python
Python‘==‘ 及 ‘is‘相关原理解析
2020/09/05 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
大一自我鉴定范文
2013/12/27 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
省文明单位申报材料
2014/05/08 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS