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


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 相关文章推荐
你可能不知道的JavaScript的new Function()方法
Apr 17 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
Jquery实现由下向上展开效果的例子
Dec 08 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
javascript实现不同颜色Tab标签切换效果
Apr 27 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
微信小程序实现带参数的分享功能(两种方法)
May 17 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
原生JS实现音乐播放器
Jan 26 Javascript
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
php显示指定目录下子目录的方法
2015/03/20 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
JS 建立对象的方法
2007/04/21 Javascript
javascript 文档的编码问题解决
2009/03/01 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
3种Jquery限制文本框只能输入数字字母的方法
2014/12/03 Javascript
JS提交form表单实例分析
2015/12/10 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
canvas实现钟表效果
2017/02/13 Javascript
jQuery仿IOS弹出框插件
2017/02/18 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python实现备份文件实例
2014/09/16 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Linux中如何设置Java环境变量(Ubuntu)
2016/07/24 面试题
装潢设计专业推荐信模板
2013/11/26 职场文书
同事打架检讨书
2014/02/04 职场文书
求职毕业生自荐书
2014/02/08 职场文书
推广普通话标语
2014/06/27 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android
gtx1650怎么样 gtx1650显卡相当于什么级别
2022/04/08 数码科技
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers