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


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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
Feb 05 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
React.js绑定this的5种方法(小结)
Jun 05 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 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/01/05 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
html中的input标签的checked属性jquery判断代码
2012/09/19 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
收藏AngularJS中最重要的核心功能
2017/07/09 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
webpack file-loader和url-loader的区别
2019/01/15 Javascript
JS实现点击按钮随机生成可拖动的不同颜色块示例
2019/01/30 Javascript
JS获取本地地址及天气的方法实例小结
2019/05/10 Javascript
使用Karma做vue组件单元测试的实现
2020/01/16 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
详解Python编程中包的概念与管理
2015/10/16 Python
详解duck typing鸭子类型程序设计与Python的实现示例
2016/06/03 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
对python中数据集划分函数StratifiedShuffleSplit的使用详解
2018/12/11 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
python重要函数eval多种用法解析
2020/01/14 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
python GUI计算器的实现
2020/10/09 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
《东方明珠》教学反思
2014/04/20 职场文书
校园文明标语
2014/06/13 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
先进党员事迹材料
2014/12/24 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
python 命令行传参方法总结
2021/05/25 Python