原理就是上下两个盒子,当上面的盒子向左滑动时显示出下面的盒子。
效果展示:
直接上代码,注释应该写的挺清楚的。
wxml
<view class="list-item" wx:for="{{list}}" wx:key="id">
<view class="item-btns">
<image class="update" src="/icons/修改.png" bindtap="update"></image>
<image class="delete" src="/icons/删除.png" bindtap="delete" data-id="{{item._id}}"></image>
</view>
<view class="item-cont" data-index="{{index}}" style="left:{{item.offsetX}}rpx" bindtouchstart="touchStart" catchtouchmove="touchMove" bindtouchend="touchEnd">
</view>
</view>
wxss
.list-item{
margin: 10rpx auto;
width: 700rpx;
height:130rpx;
position:relative;
}
.item-btns{
display:flex;
justify-content: flex-end;
height: 100%;
}
.update{
width: 80rpx;
height: 80rpx;
background-color: pink;
border-radius: 50%;
margin-right: 20rpx;
margin-top: 25rpx;
}
.delete{
width: 80rpx;
height: 80rpx;
background-color: pink;
border-radius: 50%;
margin-right: 30rpx;
margin-top: 25rpx;
}
.item-cont{
border-radius: 15rpx;
position:absolute;
top:0rpx;
left:0rpx;
width:100%;
height:100%;
background:#ddd;
}
js
let recordStartX = 0, currentOffsetX = 0, curIndex = 0; //按下初始值,当前滑块初始值,当前滑块下标
Page({
/**
* 页面的初始数据
*/
data: {
list:[{id:1},{id:2},{id:3}],
offsetWidth:-250, //上面的盒子向左滑动时,下面的盒子要显示出来的宽度,负号是指相对于起始位置向左滑动为负值
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
touchStart: function (e) { //触摸开始
recordStartX = e.touches[0].clientX; //记录触摸的初始位置
curIndex = e.currentTarget.dataset.index; //记录当前触摸的盒子下标
currentOffsetX = this.data.list[curIndex].offsetX; //记录当前滑块的初始值
// if(lastIndex != curIndex){
// this.data.list[lastIndex].offsetX = 0;
// }
}
,
touchMove: function (e) { //移动手指,向左移动过程中,事件被不断触发
let list = this.data.list;
let endX = e.touches[0].clientX; //记录移动过程中的位置
let gapX = recordStartX - endX; //记录手指滑动的距离
let result = currentOffsetX - gapX; //记录滑块当前的相对位置
if (result >= this.data.offsetWidth ) { //如果大于下面盒子要显示的距离(因为是相对位置,两个变量都是负数)就改变滑块当前位置
list[curIndex].offsetX = result;
}
this.setData({
list:list
});
}
,
touchEnd: function (e) { //手指抬起来(触摸结束)
//lastIndex = curIndex;
let list = this.data.list;
let halfOffset = this.data.offsetWidth / 2;
if (list[curIndex].offsetX < halfOffset) { //如果滑动距离超过一半就直接滑到终点
list[curIndex].offsetX = this.data.offsetWidth;
} else {
list[curIndex].offsetX = 0; //否则就回到起始位置
}
this.setData({
list:list
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
这是可以多个盒子同时显示按钮,如果想只能同时显示一个按钮的话,就增加几行代码。
let recordStartX = 0, currentOffsetX = 0, curIndex = 0,lastIndex = 0; //按下初始值,当前滑块初始值,当前滑块下标,上一个滑块下标
Page({
/**
* 页面的初始数据
*/
data: {
list:[{id:1},{id:2},{id:3}],
offsetWidth:-250, //上面的盒子向左滑动时,下面的盒子要显示出来的宽度,负号是指相对于起始位置向左滑动为负值
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
touchStart: function (e) { //触摸开始
recordStartX = e.touches[0].clientX; //记录触摸的初始位置
curIndex = e.currentTarget.dataset.index; //记录当前触摸的盒子下标
currentOffsetX = this.data.list[curIndex].offsetX; //记录当前滑块的初始值
if(lastIndex != curIndex){ //如果当前滑块不是上一个滑块,就将上一个滑块归位
this.data.list[lastIndex].offsetX = 0;
}
}
,
touchMove: function (e) { //移动手指,向左移动过程中,事件被不断触发
let list = this.data.list;
let endX = e.touches[0].clientX; //记录移动过程中的位置
let gapX = recordStartX - endX; //记录手指滑动的距离
let result = currentOffsetX - gapX; //记录滑块当前的相对位置
if (result >= this.data.offsetWidth ) { //如果大于下面盒子要显示的距离(因为是相对位置,两个变量都是负数)就改变滑块当前位置
list[curIndex].offsetX = result;
}
this.setData({
list:list
});
}
,
touchEnd: function (e) { //手指抬起来(触摸结束)
lastIndex = curIndex; //将当前下标的值赋给上一个滑块下标
let list = this.data.list;
let halfOffset = this.data.offsetWidth / 2;
if (list[curIndex].offsetX < halfOffset) { //如果滑动距离超过一半就直接滑到终点
list[curIndex].offsetX = this.data.offsetWidth;
} else {
list[curIndex].offsetX = 0; //否则就回到起始位置
}
this.setData({
list:list
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})