前言:实现小程序滑动删除有几种方式,文章会简单列举两种实现,先看效果。
一、使用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 }) } })
总结
到此这篇关于小程序实现左滑删除的效果的文章就介绍到这了,更多相关小程序左滑删除内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!
小程序实现左滑删除的效果的实例代码
- Author -
DOTNET的猫声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@