思路
采用分层思想,每个item分为上下两层,上面一层放内容,下面一层放删除按钮
上面一层采用绝对定位,下面一层放到需要显示的位置,通过动态设置right属性的值,来实现向左滑动漏出下面的删除按钮
通过touchstart,touchmove 这几个事件来判断滑动的方向
通过item的index值确定滑动的是哪一项,设置滑动项的right值
在需要滑动的item上注册事件
<view class='address-list' data-index="{{index}}" bindtouchstart='touchStart' bindtouchmove='touchMove'>
<!-- 删除按钮 -->
<view class='del'><image src='{{AppImg.address_del}}'></image></view>
<!-- 内容 -->
<view class='adsInfo' style="right:{{item.right}}">
<view class='icontrue'><image src='{{AppImg.address_right}}'></image></view>
<view class='info'>
<view class='info-name'>涂山苏苏</view>
<view class='info-address'>海市上海市浦东新海市上海市浦东新海市上海市浦东新</view>
</view>
<view class='iconmsg'><image src='{{AppImg.address_change}}'></image></view>
</view>
</view>
js
data:{
movedel:{
clientStart:'',//滑动开始的位置
clientMove:'',//滑动的位置
},
addressList:[
{id:1,right:''},
{ id: 2, right: '' }
]
}
// 开始滑动
touchStart(e){
let start = "movedel.clientStart"
this.setData({
[start]: e.touches[0].clientX
})
},
// 滑动
touchStart(e){
let start = "movedel.clientStart"
this.setData({
[start]: e.touches[0].clientX
})
},
// 滑动
touchMove(e){
let move = 'movedel.clientMove'
this.setData({
[move]: e.touches[0].clientX
})
let distance = this.data.movedel.clientStart - this.data.movedel.clientMove
//确定滑动的是哪一项
let index = e.currentTarget.dataset.index
let list = this.data.addressList
if(distance<=0){
list[index].right = '0';
this.setData({
addressList:list
})
}
if(distance>=80){
list[index].right = '80rpx';
this.setData({
addressList: list
})
}
},