小程序仿QQ右滑效果

之前项目有了需求就是列表右滑出现功能栏，类似QQ有右滑删除效果

、

话不多说，上代码

Y{{item.writerFlag || 3}} {{item.levelName}}

粉丝：{{item.fansCount || 0}} 作品：{{item.goodsCount || 0}}

编辑

取消

更换艺术家

删除艺术家

创建艺术家

/**

* 页面的初始数据

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;

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 敬请赐教

小程序仿QQ右滑效果

你可能感兴趣的:(小程序仿QQ右滑效果)