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


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 相关文章推荐
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
Extjs单独定义各组件的实例代码
Jun 25 Javascript
使用JavaScript链式编程实现模拟Jquery函数
Dec 21 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
Sep 04 Javascript
H5+css3+js搭建带验证码的登录页面
Oct 11 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
php 变量未定义等错误的解决方法
2011/01/12 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串
2020/04/05 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP获取input输入框中的值去数据库比较显示出来
2016/11/16 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
jquery索引在使用中的一些困惑
2013/10/24 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
关于Vue组件库开发详析
2018/07/01 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
javascript中闭包closure的深入讲解
2021/03/03 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
Python中全局变量和局部变量的理解与区别
2021/02/07 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
正风肃纪剖析材料
2014/02/18 职场文书
党的群众路线教育实践活动领导班子整改方案
2014/10/25 职场文书
学生病假条范文
2015/08/17 职场文书
MySQL GTID复制的具体使用
2022/05/20 MySQL