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


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 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
简介JavaScript中toUpperCase()方法的使用
Jun 06 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
Sep 13 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 jQuery
基于element-ui的rules中正则表达式
Sep 04 Javascript
JavaScript实现星级评价效果
May 17 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
详解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
防止MySQL注入或HTML表单滥用的PHP程序
2009/01/21 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
Jquery练习之表单验证实现代码
2010/12/14 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
浏览器打开层自动缓慢展开收缩实例代码
2013/07/04 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
js实现图片加载淡入淡出效果
2017/04/07 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
vuex分模块后,实现获取state的值
2020/07/26 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
python django集成cas验证系统
2014/07/14 Python
Python中文竖排显示的方法
2015/07/28 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
django ORM之values和annotate使用详解
2020/05/19 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
行政主管岗位职责
2013/11/18 职场文书
总裁办公室主任职责
2014/01/02 职场文书
房地产融资计划书
2014/01/10 职场文书
党员承诺书格式
2014/05/21 职场文书
二手车交易协议书标准版
2014/11/16 职场文书