小程序中实现左滑删除
效果预览:
// wxml
<view class="delete_list">
<view class="list" wx:for="{{listData}}" wx:key="{{index}}}" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" data-index="{{index}}">
<view class="content" style="{{activeIndex===index?list_style:''}}">{{item}}</view>
<view class="delete" bindtap="delete" style="{{activeIndex===index?list_style:''}}">删除</view>
</view>
</view>
// wxss
page {
height: 100%;
background-color: #f1f1f1;
}
.delete_list {
padding: 0 0 0 30rpx;
margin: 30rpx 30rpx 0;
background-color: #fff;
}
.delete_list>.list {
height: 120rpx;
line-height: 120rpx;
display: flex;
width: 100%;
overflow: hidden;
box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.3); /*模拟一像素边框*/
}
.delete_list>.list>.content {
flex: 1;
transform: translateX(240rpx);
margin-left: -240rpx;
/*background-color: #fff;*/
transition: all 0.2s ease-in-out;
}
.delete_list>.list>.delete {
width: 240rpx;
text-align: center;
color: #fff;
background-color: #E64340;
transform: translateX(240rpx);
transition: all 0.2s ease-in-out;
}
// js
const app = getApp()
Page({
data:{
listData: [
'我是内容一',
'我是内容二',
'我是内容三',
'我是内容四',
'我是内容五',
'我是内容六',
'我是内容七',
'我是内容八'
],
activeIndex: -1,
list_style: '',
startX: 0,
rate: 2
},
onLoad () {
let rate = 750 / wx.getSystemInfoSync().screenWidth
this.setData({
rate: rate
})
},
touchstart: function (e) {
let startX = e.touches[0].clientX
this.setData({
startX: startX
})
},
touchmove: function(e) {
let moveX = e.touches[0].clientX
let dis = (this.data.startX - moveX) * this.data.rate // 换算成rpx
let activeIndex = e.currentTarget.dataset.index
let left = 240
if (dis <= 0) {
left = 240
} else if (dis >= 240) {
left = 0
} else {
left = 240 - dis
}
this.setData({
list_style: 'transform:translateX(' + left + 'rpx)',
activeIndex: activeIndex
})
},
touchend: function (e) {
let endX = e.changedTouches[0].clientX
let dis = (this.data.startX - endX) * this.data.rate
let activeIndex = e.currentTarget.dataset.index
let left = 0
if (dis >= 200) {
left = 0
} else {
left = 240
}
this.setData({
activeIndex: activeIndex,
list_style: 'transform:translateX(' + left + 'rpx)'
})
},
delete: function () {
this.data.listData.splice(this.data.activeIndex, 1)
this.setData({
listData: this.data.listData
})
}
})
备注:目前1像素边框问题通过box-shadow解决,本人无法通过定位结合缩放(transform: scale(0.5))解决1像素边框问题。