1.實現(xiàn)效果
image.png
2.實現(xiàn)原理
微信小程序自帶組件movable-view圣勒，此節(jié)點為movable-area子節(jié)點馍迄，必須包裹在movable-area中尿庐，不設(shè)置寬高時候 默認為10rpx玩祟。
movable-area
3.完整代碼（更多小程序代碼請移到gitee查看）
https://gitee.com/susuhhhhhh/wxmini_demo
4.部分代碼
/* pages/touchMove2/index.wxml */
<view class="top" wx:for="{{cardList}}">
<movable-area>
<movable-view out-of-bounds="true" direction="horizontal" x="{{item.xmove}}" inertia="true"
data-index="{{index}}" bindtouchstart="handleTouchStart" bindtouchend="handleTouchEnd"bindchange="handleMovableChange">
<view>{{item.name}}</view>
</movable-view>
</movable-area>
<view class="movable_delete_btn flex a_c j_c" data-id="{{item.id}}" bindtap="handleDelete">刪除</view>
</view>
/* pages/touchMove2/index.wxss */
page{
background: #F5F5F8;
}
.top{
margin: 20rpx;
width: 710rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 20rpx;
line-height:200rpx;
text-align:center;
display: flex;
}
movable-view{
width: 710rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 20rpx;
line-height:200rpx;
text-align:center;
}
movable-area{
height: 200rpx;
background: #FFFFFF;
border-radius: 20rpx;
line-height:200rpx;
text-align:center;
width: calc(710rpx - 120rpx);
}
.movable_delete_btn {
justify-content: center;
width: 115rpx;
font-size: 24rpx;
font-weight: 600;
color: #FFFFFF;
background: red;
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
// pages/touchMove2/index.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
cardList:[
{
id:'1',
name:'左滑試試吧',
xmove:0,
},
{
id:'2',
name:'左滑試試吧',
xmove:0,
},
{
id:'3',
name:'左滑試試吧',
xmove:0,
},
{
id:'4',
name:'左滑試試吧',
xmove:0,
},
]
},
/**
* 處理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)
}
},
/**
* 顯示刪除按鈕
*/
showDeleteButton: function (e) {
let index = e.currentTarget.dataset.index;
this.setXmove(index, -65);
},
/**
* 隱藏刪除按鈕
*/
hideDeleteButton: function (e) {
let index = e.currentTarget.dataset.index;
this.setXmove(index, 0);
},
/**
* 設(shè)置movable-view位移
*/
setXmove: function (index, xmove) {
let {cardList} = this.data;
cardList[index].xmove = xmove;
this.setData({
cardList: cardList
})
console.log(this.data.cardList)
},
/**
* 處理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)
}
},
onLoad: function (options) {
},
onShow: function () {
},
handleDelete(e) {
let {id} = e.currentTarget.dataset;
this.itemDel(id)
},
itemDel(id){
this.data.cardList.forEach((item,index)=>{
if(item.id==id){
this.data.cardList.splice(index,1)
}
this.setData({
cardList:this.data.cardList
})
wx.showToast({
title: '刪除成功',
icon:'success'
})
})
}
})
