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


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创建div 实现代码
Apr 27 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
jQuery之DOM对象和jQuery对象的转换与区别分析
Jan 08 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
jquery模拟进度条实现方法
Aug 03 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
angularjs 中$apply,$digest,$watch详解
2016/10/13 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
jQuery层叠选择器用法实例分析
2019/06/28 jQuery
微信小程序 Storage更新详解
2019/07/16 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
python爬取网页转换为PDF文件
2018/06/07 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
护士个人年度总结范文
2015/02/13 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书