微信小程序实现左滑删除效果


Posted in Javascript onNovember 18, 2020

微信小程序实现左滑删除效果的具体代码,供大家参考,具体内容如下

微信小程序实现左滑删除效果

.wxml

<scroll-view scroll-y="{{isScroll}}" style='width:{{windowWidth}}px;height:{{windowHeight}}px'>
 <block wx:key="item" wx:for="{{data}}">
  <view data-index='{{index}}' class="custom_item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{{item.right}}rpx">
  <view class="content">{{item.content}}</view>
  <view class="remove" bindtap="delItem">删除 </view>
  </view>
 </block>
 </scroll-view>

.js

Page({
 data: {
 delBtnWidth: 160,
 data: [{ content: "采购", right: 0 }, { content: "供应", right: 0 }, { content: "采购", right: 0 }, { content: "供应", right: 0}],
 isScroll: true,
 windowWidth:0,
 windowHeight: 0,
 },
 onLoad: function (options) {
 var that = this;
 wx.getSystemInfo({
  success: function (res) {
  that.setData({
   windowWidth: res.windowWidth,
   windowHeight: res.windowHeight
  });
  }
 });
 },
 drawStart: function (e) {
 // console.log("drawStart"); 
 var touch = e.touches[0]

 for (var index in this.data.data) {
  var item = this.data.data[index]
  item.right = 0
 }
 this.setData({
  data: this.data.data,
  startX: touch.clientX,
 })

 },
 drawMove: function (e) {
 var touch = e.touches[0]
 var item = this.data.data[e.currentTarget.dataset.index]
 var disX = this.data.startX - touch.clientX

 if (disX >= 20) {
  if (disX > this.data.delBtnWidth) {
  disX = this.data.delBtnWidth
  }
  item.right = disX
  this.setData({
  isScroll: false,
  data: this.data.data
  })
 } else {
  item.right = 0
  this.setData({
  isScroll: true,
  data: this.data.data
  })
 }
 },
 drawEnd: function (e) {
 var item = this.data.data[e.currentTarget.dataset.index]
 if (item.right >= this.data.delBtnWidth / 2) {
  item.right = this.data.delBtnWidth
  this.setData({
  isScroll: true,
  data: this.data.data,
  })
 } else {
  item.right = 0
  this.setData({
  isScroll: true,
  data: this.data.data,
  })
 }
 },

 delItem: function (e) {

 }
})

.wxss

.custom_item{
 height: 240rpx;
 width: 100%;
 display: flex;
 position: relative;
}
.remove{ 
 width: 160rpx; 
 height: 100%; 
 background-color: red; 
 color: white; 
 position: absolute; 
 top: 0; 
 right: -160rpx; 
 display: flex; 
 justify-content: center; 
 align-items: center; 
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
javascript数组去掉重复
May 12 Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
vue router自动判断左右翻页转场动画效果
Oct 10 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
详解vue实现坐标拾取器功能示例
Nov 18 #Vue.js
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
Vue如何循环提取对象数组中的值
Nov 18 #Vue.js
vue在图片上传的时候压缩图片
Nov 18 #Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
微信小程序实现多张图片上传功能
Nov 18 #Javascript
如何在Express4.x中愉快地使用async的方法
Nov 18 #Javascript
You might like
php 各种应用乱码问题的解决方法
2010/05/09 PHP
php+mysqli使用面向对象方式更新数据库实例
2015/01/29 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
javascript 日期常用的方法
2009/11/11 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
AngularJS基础 ng-dblclick 指令用法
2016/08/01 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python numpy 按行归一化的实例
2019/01/21 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
初中生学习的自我评价
2013/11/14 职场文书
工作岗位说明书模板
2014/05/09 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
放假通知范文
2015/04/14 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
vue中使用mockjs配置和使用方式
2022/04/06 Vue.js
Redis批量生成数据的实现
2022/06/05 Redis
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python