wxml
<!--pages/touchMove2/index.wxml-->
<view class="container">
<block wx:for="{{cardList}}" wx:key="cardList">
<view class="container-item">
<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" data-id="{{item.id}}" catchtap="handleDelete">删除</view>
</view>
</block>
</view>
js
// pages/touchMove2/index.js
Page({
/**
* 页面的初始数据
*/
data: {
cardList: [
{
id: '1',
name: '左滑试试吧',
xmove: 0,
},
{
id: '2',
name: '左滑试试吧',
xmove: 0,
},
{
id: '3',
name: '左滑试试吧',
xmove: 0,
},
{
id: '4',
name: '左滑试试吧',
xmove: 0,
},
{
id: '5',
name: '左滑试试吧',
xmove: 0,
},
{
id: '6',
name: '左滑试试吧',
xmove: 0,
},
{
id: '7',
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);
},
/**
* 设置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'
})
})
}
})
wxss
/* pages/touchMove2/index.wxss */
page {
background: rgba(57, 179, 74, 0.3);
padding: 20rpx;
box-sizing: border-box;
}
.container-item {
margin: 20rpx auto;
width: 710rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 20rpx;
line-height: 200rpx;
text-align: center;
display: flex;
/* 添加此属性 不会划出界面 */
overflow: hidden;
box-shadow: 0rpx 5rpx 18rpx 3rpx rgba(176, 176, 176, 0.5);
}
movable-view {
width: 710rpx;
height: 200rpx;
background: #FFFFFF;
border-radius: 20rpx;
line-height: 200rpx;
text-align: center;
font-size: 26rpx;
color: #999999;
}
movable-area {
height: 200rpx;
background: pink;
border-radius: 20rpx 0 0 20rpx;
line-height: 200rpx;
text-align: center;
width: calc(710rpx - 115rpx);
}
.movable_delete_btn {
width: 115rpx;
font-size: 24rpx;
font-weight: 600;
color: #FFFFFF;
background: red;
border-top-right-radius: 20rpx;
border-bottom-right-radius: 20rpx;
}
