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


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中使用了document和window哪些属性和方法小结
Sep 13 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
详解Bootstrap创建表单的三种格式(一)
Jan 04 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
jQuery插件简单学习实例教程
Jul 01 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
使用vuex的state状态对象的5种方式
Apr 19 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 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
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
jQuery EasyUI 的EasyLoader功能介绍
2010/09/12 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
2015/02/13 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
python分析网页上所有超链接的方法
2015/05/08 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python验证码图片处理(二值化)
2019/11/01 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
世界上最大的铁人三项商店:Tri UK
2020/11/04 全球购物
本科生个人求职自荐信
2013/09/26 职场文书
应届生求职自荐信
2014/07/04 职场文书
代办委托书怎么写
2014/08/01 职场文书
会计出纳岗位职责
2015/03/31 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
2015年统战工作总结
2015/05/19 职场文书
话题作文之自信作文
2019/11/15 职场文书
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS