小程式實現左滑刪除的效果的例項程式碼
阿新 • • 發佈：2020-10-21
前言:實現小程式滑動刪除有幾種方式,文章會簡單列舉兩種實現,先看效果。
一、使用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使用定位來固定,通過操縱事件來實現向需要移動的方向移動。
完整程式碼如下
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
})
}
})
總結
到此這篇關於小程式實現左滑刪除的效果的文章就介紹到這了,更多相關小程式左滑刪除內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！