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


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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
IE 下的只读 innerHTML
Aug 21 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 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
玩转图像函数库―常见图形操作
2006/09/03 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP array_reduce()函数的应用解析
2018/10/28 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
微信小程序时间戳转日期的详解
2019/04/30 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python模拟百度登录实例详解
2016/01/20 Python
Python抓取聚划算商品分析页面获取商品信息并以XML格式保存到本地
2018/02/23 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python日期相关操作实例小结
2019/06/24 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python文件排序的方法总结
2020/09/13 Python
python代码实现猜拳小游戏
2020/11/30 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
高性能装备提升营地:Kammok
2019/02/27 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
2015年社区妇联工作总结
2015/04/21 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书