之前项目有了需求就是列表右滑出现功能栏，类似QQ有右滑删除效果
话不多说，上代码
<view class="container">
<view class="body-list">
<view class="list-continer" wx:for="{{list}}" wx:key="index">
<view class="list-item {{index===listIndex?'on':''}}" >
<view class="item-info" bindtouchstart="touchS" bindtouchmove="touchM" data-index="{{index}}">
<view class="item-info-next">
<view class="item-content">
<image src="{{item.memberLogo}}" mode="aspectFill"></image>
<view class="content">
<text class="content-title">{{item.writerName || item.stagename || ''}}</text>
<label><i class="iconfont iconYISHUJIA"></i> Y{{item.writerFlag || 3}} {{item.levelName}}</label>
<text class="content-tip" decode="{{true}}">粉丝：{{item.fansCount || 0}} 作品：{{item.goodsCount || 0}}</text>
</view>
</view>
<view class="edit-btn" bindtap="jump" data-url="/pages/mine/pages/user-setting/artist-data/artist-data?id={{item.id}}">编辑</view>
</view>
</view>
<view class="list-right">
<view bindtap="cannelRightTap">取消</view>
<view>更换艺术家</view>
<view bindtap="delTap" data-id="{{item.writerId}}">删除艺术家</view>
</view>
</view>
</view>
</view>
<view class="created-btn" bindtap="jump" data-url="/pages/mine/pages/user-setting/artist-data/artist-data">创建艺术家</view>
</view>
/**
* 页面的初始数据
*/
data: {
list:[],
listIndex:null,
page:1,
isMore:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.init();
},
init(isLoading=false){
if(!this.data.isMore) return;
app.wxapi.showLoading('加载中~');
mineApi.getWriterInfoList({
start: 0,
page: this.data.page,
limit: 10,
}).then(res=>{
wx.hideLoading();
if(res.code==200){
if(res.data.length<10) this.data.isMore=false;
++this.data.page;
this.setData({list:isLoading?[...this.data.list,...res.data]:res.data})
}else app.wxapi.showToast(res.msg);
})
},
touchS(e) {
// 获得起始坐标
this.startX = e.touches[0].clientX;
this.startY = e.touches[0].clientY;
},
touchM(e) {
// 获得当前坐标
this.currentX = e.touches[0].clientX;
this.currentY = e.touches[0].clientY;
const x = this.startX - this.currentX; //横向移动距离
const y = Math.abs(this.startY - this.currentY); //纵向移动距离，若向左移动有点倾斜也可以接受
if (x > 35 && y < 110) {
//向左滑是显示删除
this.setData({listIndex: e.currentTarget.dataset.index})
} else if (x < -35 && y < 110) {
//向右滑
this.setData({listIndex: null})
}
},
cannelRightTap(){
this.setData({listIndex: null})
},
delTap(e){
var _that = this;
const{id}=e.currentTarget.dataset;
wx.showModal({
title: '温馨提示',
content: `是否确认删除该艺术家？`,
confirmText: '确定',
confirmColor: '#FE5250',
success(modelRes) {
if (modelRes.confirm) {
app.wxapi.showLoading("操作中~")
mineApi.delWriterInfo({"brokerId": _that.data.userInfo.id,"writerId": id}).then(res=>{
wx.hideLoading()
if(res.code==200){
app.wxapi.showToast('已删除')
_that.init();
_that.setData({listIndex:null})
}else app.wxapi.showToast(res.code)
})
}
}
})
},
.container{
.body-list{
width: 100%;
margin-top: 30rpx;
padding-bottom: 150rpx;
.list-continer{
width: 100%;
height: 210rpx;
position: relative;
.list-item{
width: 100%;
height: 100%;
position: relative;
.item-info{
width: 100%;
height: 100%;
position: absolute;
left: 0;
padding: 0 30rpx;
transition: 0.3s;
background-color: #262626;
.item-info-next{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1rpx solid #707070;
.item-content{
flex: 1;
display: flex;
height: 100%;
align-items: center;
image{
width: 120rpx;
height: 120rpx;
overflow: hidden;
background-color: #707070;
border-radius: 50%;
}
.content{
width: 450rpx;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 30rpx 0;
padding-left: 30rpx;
.content-title{
font-size: 36rpx;
font-weight: 300;
color: #EBEAEA;
}
label{
font-size: 24rpx;
font-weight: 300;
color: #FF8601;
i{
font-size: 25rpx;
color: #FF8601;
margin-right: 5rpx;
}
}
.content-tip{
font-size: 28rpx;
color: #979393;
}
}
}
.edit-btn{
width: 120rpx;
height: 60rpx;
background: #FF8601;
border-radius: 50rpx;
font-size: 32rpx;
font-weight: 300;
line-height: 60rpx;
text-align: center;
color: #EBEAEA;
}
}
}
.list-right{
width: 480rpx;
position: absolute;
right: -480rpx;
height: 100%;
transition: 0.3s;
display: flex;
view{
width: 160rpx;
height: 100%;
text-align: center;
line-height: 210rpx;
background: #979393;
font-size: 24rpx;
font-weight: 300;
color: #EBEAEA;
&:nth-of-type(2){
width: 160rpx;
height: 100%;
background: #FF8601;
}
&:last-of-type{
width: 160rpx;
height: 100%;
background: #A91D33;
}
}
}
&.on{
.item-info{
left: -480rpx;
}
.list-right{
position: absolute;
right: 0;
}
}
}
&:last-of-type{
.list-item{
.item-info-next{
border:none;
}
}
}
}
}
.created-btn{
width: 689rpx;
height: 90rpx;
background: #A91D33;
border-radius: 5rpx;
position: fixed;
bottom: 30rpx;
left: 0;
right: 0;
margin: 0 auto;
font-size: 36rpx;
font-weight: 300;
text-align: center;
line-height: 90rpx;
color: #EBEAEA;
}
}
效果简单 多谢支持 如有bug 敬请赐教
