简单实现小程序滑动删除效果
tip:由于开始练习css阶段自己的疏忽,之后铸就的结果就是css布局出现很多的问题,css动效基本没有怎么用过,在给出原型实现的过程中,出现了很大的问题,项目是协同开发,由于团队都是原生小程序开发,我也就用原生来写,弥补自己的不足
实现效果:
<view class="test_container"> <view class="content" bindtouchstart="touchStart" bindtouchend="touchEnd" wx:for="{{clockList}}" wx:key="index" data-index="{{index}}" style=""> <view class="left"> {{item.content}} </view> <view class="right" style="right:{{item.show?'0':'-98'}}rpx" bindtap="delClock" data-index="{{index}}"> 删除 </view> </view> </view>
Page({
data:{
//为每一个模拟的数据添加show 默认隐藏删除按钮
clockList: [
{
clockId:0,
content:"内容1",
show:false
},
{
clockId: 1,
content: "内容2",
show: false
},
{
clockId: 2,
content: "内容3",
show: false
}],
//触摸坐标初始化
touchStartX: 0,
},
touchStart(e) {
//设置初始位置的值为滑动的坐标
this.setData({
touchStartX: e.changedTouches[0].clientX
})
},
touchEnd(e) {
console.log(e)
//获取当前点击index
const index = e.currentTarget.dataset.index
//重新赋值
const clockList = this.data.clockList
//判断初始值是否大于移动之后的值+50 如果大于判断是左划删除 删除按钮显示
if (this.data.touchStartX > e.changedTouches[0].clientX + 50) {
clockList[index].show = true
}
//判断初始值是否小于等于初始值 如果小于判断是用户右滑 删除按钮隐藏
if (this.data.touchStartX <= e.changedTouches[0].clientX) {
clockList[index].show = false
}
//更新clockList
this.setData({
clockList
})
},
delClock(e){
//将index值作为参数传入,必须是index数组下标
const { index } = e.currentTarget.dataset;
console.log(e.currentTarget.dataset)
//调用数组中的splice方法删除元素
this.data.clockList.splice(index,1);
//删除之后,重新赋值
this.setData({
clockList: this.data.clockList
})
}
});
/* 最外层容器 */
.test_container{
padding-top:10px;
width:100%;
height:100%;
background: #F0F0F0;
}
/* 内容区域 主要配置定位 以及超出隐藏,使删除按钮过渡更加丝滑 */
.content{
margin-top:120rpx;
width:702rpx;
height:231rpx;
background: #fff;
display: flex;
position: relative;
margin:120rpx 25rpx 40rpx 25rpx;
overflow: hidden;
border-radius: 10rpx;
}
/* 左边区域沾满剩余区域 */
.left{
display: flex;
justify-content: center;
align-items: center;
flex:1;
}
/*删除按钮 主要定位以及动画*/
.right{
position: absolute;
right:0;
top:0;
font-size: 26rpx;
width:98rpx;
height:100%;
display: flex;
justify-content: center;
align-items: center;
background: red;
color:aliceblue;
transition: all 0.3s;
border-radius: 10rpx;
}
版权声明：本文为Azune原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。