小程序实现左滑删除的效果的实例代码


Posted in Javascript onOctober 19, 2020

前言:实现小程序滑动删除有几种方式,文章会简单列举两种实现,先看效果。

小程序实现左滑删除的效果的实例代码

一、使用movable-view实现滑动

先看官方文档

小程序实现左滑删除的效果的实例代码

简单解读一下movable-area标签的基本概念。movable-area标签就是定义了一个可移动的视图容器,支持在页面中拖拽滑动,跟普通的view容器是一样的,但是也有不同之处,movable-area必须设置width和height属性,不设置默认为10px;movable-view 默认为绝对定位,top和left属性为0px。

<movable-area>
  <movable-view out-of-bounds="true" direction="horizontal" inertia="true">
  </movable-view>
  </movable-area>

我们需要用的一些属性out-of-bounds,给他定义true,让我们的容器超过可移动区域后,movable-view还可以移动,direction属性是定义我们滑动的方向,vertical是垂直滑动,horizontal是水平滑动。

二、使用Touch事件实现滑动

1.bindtouchstart 函数,手指触摸动作开始
2.bindtouchmove 函数,手指触摸后移动
3.bindtouchend 函数,手指触摸动作结束

实现思路:
1.页面上的容器分为上下两层,上面一层显示正常加载无动作的内容,下面一层显示容器触发事件后展示的内容,例如删除、置顶、标为未读等按钮。
2.每个容器上面那一层容器我们通过css使用定位来固定,通过操纵事件来实现向需要移动的方向移动。
3.通过官方文档提供的API来实现容器随着方向移动。

完整代码如下

1.wxml

<view class="">
 <view class="containerTitle">使用movable-view实现左滑</view>
 <view class="list">
 <view class="product-item" wx:for="{{productList}}" wx:for-index="index" wx:key="{{item.id}}" >
  <movable-area>
  <movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}"
   inertia="true"
   data-productIndex="{{index}}"
   bindtouchstart="handleTouchStart"
   bindtouchend="handleTouchEnd"
   bindchange="handleMovableChange">
   <view class="product-item-wrap">
   <view class="product-movable-item">
    <view class="product-movable-item-name">{{item.name}}</view>
    <view class="product-movable-item-code">{{item.code}}</view>
   </view>
   <view class="product-movable-item product-movable-item-amount">
    <text class="amount">{{item.amount}}</text>
    <text class="unit">万</text>
   </view>
   </view>
  </movable-view>
  </movable-area>
  <view class="delete-btn" data-id="{{item.id}}" bindtap="handleDeleteProduct">删除</view>
 </view>
 </view>
 <view class="containerTitle">使用Touch事件实现左滑</view>
 <view class="list">
 <view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key="{{item.id}}">
  <slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key="{{item.id}}">
  <view class="product-item-wrap">
   <view class="product-movable-item">
   <view class="product-movable-item-name">{{item.name}}</view>
   <view class="product-movable-item-code">{{item.code}}</view>
   </view>
   <view class="product-movable-item product-movable-item-amount">
   <text class="amount">{{item.amount}}</text>
   <text class="unit">万</text>
   </view>
  </view>
  </slide-delete>
 </view>
 </view>
</view>

 

2.wxss

.containerTitle {
 margin: 60rpx 0 30rpx;
 font-size: 40rpx;
 text-align: center;
 font-weight: bold;
 color: #383A3D;
}

.list .product-item {
 position: relative;
 width: 100vw;
 border-bottom: 2rpx solid #E9E9E9;
 box-sizing: border-box;
 background: #fff;
 z-index: 999;
}

.slide-product-list .slide-product-item {
 position: relative;
 width: 100vw;
 border-bottom: 2rpx solid #E9E9E9;
 box-sizing: border-box;
 background: #fff;
 z-index: 999;
}

.list .product-item movable-area {
 height: 120rpx;
 width: calc(100vw - 120rpx);
}

.list .product-item movable-view {
 height: 120rpx;
 width: 100vw;
 background: #fff;
 z-index: 999;
}

.list .product-item .delete-btn {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0; 
 width: 120rpx;
 font-family: PingFangSC-Regular;
 font-size: 24rpx;
 color: #FFFFFF;
 line-height: 120rpx;
 z-index: 1;
 background: red;
 text-align: center;
}

.list .product-item-wrap {
 position: relative;
 display: flex;
 align-items: center;
 padding: 8rpx 0 20rpx 20rpx;
 box-sizing: border-box;
}

.list .product-item-wrap .product-movable-item {
 flex: 1;
 overflow: hidden;
}

.list .product-item-wrap .product-movable-item-name {
 font-family: PingFangSC-Regular;
 font-size: 28rpx;
 color: #71747A;
 line-height: 60rpx;
 margin-right: 10rpx;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

.list .product-item-wrap .product-movable-item-code {
 font-family: PingFangSC-Regular;
 font-size: 24rpx;
 color: #969AA3;
}

.list .product-item-wrap .product-movable-item-amount {
 flex: 0 0 auto;
 padding-right: 80rpx;
 position: relative;
}

.list .product-item-wrap .product-movable-item-amount .amount {
 width: 120rpx;
 font-size: 28rpx;
 color: #383A3D;
 line-height: 60rpx;
}

.list .product-item-wrap .product-movable-item-amount .unit {
 position: absolute;
 top: 0;
 right: 30rpx;
 font-size: 28rpx;
 color: #969AA3;
 line-height: 60rpx;
}

 

3.js代码

//获取应用实例
const app = getApp()

Page({
 data: {
 productList: [
  {
  id: 1,
  name: '31省市区新增境外输入13例',
  code: 'Jin日头条',
  amount: 5
  },
  {
  id: 2,
  name: '饲养员遭熊攻击身亡',
  code: 'bai度新闻',
  amount: 4
  },
  {
  id: 3,
  name: '安倍晋三参拜靖国神社',
  code: '日媒',
  amount: 10
  }
 ],
 slideProductList: [
  {
  id: 4,
  name: '老兵回忆参加抗美援朝说今生无悔',
  code: 'xin微博',
  amount: 101
  },
  {
  id: 5,
  name: '女子下楼时玩手机踩空摔伤',
  code: 'zz资讯',
  amount: 500
  },
  {
  id: 6,
  name: '杨紫为离线庆生',
  code: 'xx新闻',
  amount: 110
  }
 ]
 },

 onLoad: function () {

 },

 /**
 * 显示删除按钮
 */
 showDeleteButton: function (e) {
 let productIndex = e.currentTarget.dataset.productindex
 this.setXmove(productIndex, -65)
 },

 /**
 * 隐藏删除按钮
 */
 hideDeleteButton: function (e) {
 let productIndex = e.currentTarget.dataset.productindex

 this.setXmove(productIndex, 0)
 },

 /**
 * 设置movable-view位移
 */
 setXmove: function (productIndex, xmove) {
 let productList = this.data.productList
 productList[productIndex].xmove = xmove

 this.setData({
  productList: productList
 })
 },

 /**
 * 处理movable-view移动事件
 */
 handleMovableChange: function (e) {
 if (e.detail.source === 'friction') {
  if (e.detail.x < -30) {
  this.showDeleteButton(e)
  } else {
  this.hideDeleteButton(e)
  }
 } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
  this.hideDeleteButton(e)
 }
 },

 /**
 * 处理touchstart事件
 */
 handleTouchStart(e) {
 this.startX = e.touches[0].pageX
 },

 /**
 * 处理touchend事件
 */
 handleTouchEnd(e) {
 if(e.changedTouches[0].pageX < this.startX && e.changedTouches[0].pageX - this.startX <= -30) {
  this.showDeleteButton(e)
 } else if(e.changedTouches[0].pageX > this.startX && e.changedTouches[0].pageX - this.startX < 30) {
  this.showDeleteButton(e)
 } else {
  this.hideDeleteButton(e)
 }
 },

 /**
 * 删除产品
 */
 handleDeleteProduct: function ({ currentTarget: { dataset: { id } } }) {
 let productList = this.data.productList
 let productIndex = productList.findIndex(item => item.id === id)
 productList.splice(productIndex, 1)
 this.setData({
  productList
 })
 if (productList[productIndex]) {
  this.setXmove(productIndex, 0)
 }
 },

 /**
 * slide-delete 删除产品
 */
 handleSlideDelete({ detail: { id } }) {
 let slideProductList = this.data.slideProductList
 let productIndex = slideProductList.findIndex(item => item.id === id)
 slideProductList.splice(productIndex, 1)
 this.setData({
  slideProductList
 })
 }
})

总结

到此这篇关于小程序实现左滑删除的效果的文章就介绍到这了,更多相关小程序左滑删除内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
深入理解node exports和module.exports区别
Jun 01 Javascript
浅谈javascript的闭包
Jan 23 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
react路由配置方式详解
Aug 07 Javascript
JS实现的3des+base64加密解密算法完整示例
May 18 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
jQuery实现图片切换效果
Oct 19 #jQuery
jQuery实现回到顶部效果
Oct 19 #jQuery
jQuery实现放大镜案例
Oct 19 #jQuery
vue v-model的用法解析
Oct 19 #Javascript
jQuery插件实现图片轮播效果
Oct 19 #jQuery
jquery插件实现轮播图效果
Oct 19 #jQuery
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 #Javascript
You might like
判“新”函数:得到今天与明天的秒数
2006/10/09 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
深入for,while,foreach遍历时间比较的详解
2013/06/08 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
js格式化时间小结
2014/11/03 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
2017/11/07 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
2020/07/26 Javascript
Python如何为图片添加水印
2016/11/25 Python
python dict 字典 以及 赋值 引用的一些实例(详解)
2017/01/20 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
python一键去抖音视频水印工具
2018/09/14 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
2013/11/07 HTML / CSS
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
励志演讲稿600字
2014/08/21 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
小学二年级数学教学计划
2015/01/20 职场文书
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL