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


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 相关文章推荐
jquery无缝向上滚动实现代码
Mar 29 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
Aug 07 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
js实现tab切换效果实例
Sep 16 Javascript
AngularJS入门教程之AngularJS表达式
Apr 18 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 Javascript
jQuery购物网页经典制作案例
Aug 19 Javascript
js监听html页面的上下滚动事件方法
Sep 11 Javascript
详解React之key的使用和实践
Sep 29 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 explode()函数用法、切分字符串
2012/10/03 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
PHP实现微信对账单处理
2018/10/01 PHP
java解析json方法总结
2019/05/16 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
javascript parseInt与Number函数的区别
2010/01/21 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
基于vue展开收起动画的示例代码
2018/07/05 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
python 排序算法总结及实例详解
2016/09/28 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
基于Python把网站域名解析成ip地址
2020/05/25 Python
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
平面设计求职信
2014/03/10 职场文书
婚前协议书怎么写
2014/04/15 职场文书
市场推广策划方案
2014/06/02 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
群众路线党员个人整改措施
2014/10/27 职场文书
幼师辞职信范文
2015/02/27 职场文书
员工担保书范本
2015/09/22 职场文书
2016年师德学习心得体会
2016/01/12 职场文书
PHP命令行与定时任务
2021/04/01 PHP
Java实现带图形界面的聊天程序
2022/06/10 Java/Android