第小程序?qū)崿F(xiàn)側(cè)滑刪除功能本文實(shí)例為大家分享了小程序?qū)崿F(xiàn)側(cè)滑刪除的具體代碼，供大家參考，具體內(nèi)容如下

1.頁(yè)面布局

view

scroll-viewscroll-y="true"

view

view#/view

view積分項(xiàng)目/view

view標(biāo)準(zhǔn)分/view

viewbindtap='AddIntegrationProject'

view+/view

/view

/view

viewwx:if="{{lists.length0}}"

view

viewwx:for="{{lists}}"wx:key="{{index}}"

viewbindtouchstart="touchS"bindtouchmove="touchM"bindtouchend="touchE"data-index='{{index}}'

view{{index+1}}/view

view{{item.itemName}}/view

view{{item.score}}分/view

view

imagebindtap='editStanderClick'data-item='{{item}}'src='{{BaseURL}}uploadFile/groupImages/edit-h2.png'/image

/view

/view

viewdata-index="{{index}}"bindtap='delectOrganizationTeamScoreStandard'data-id='{{item.ID}}'刪除/view

/view

/view

/view

viewwx:else

imagesrc='{{BaseURL}}uploadFile/groupImages/No-data.png'/image

view親！暫無您的上月積分記錄！/view

/view

/scroll-view

/view

2.樣式

/*標(biāo)準(zhǔn)s*/

.standard_text1{

height:80rpx;

line-height:80rpx;

float:left;

width:60rpx;

font-size:28rpx;

color:#3b3c42;

padding-left:30rpx;

.standard_text2{

line-height:80rpx;

float:left;

width:380rpx;

font-size:28rpx;

color:#3b3c42;

.standard_text3{

height:80rpx;

line-height:80rpx;

float:left;

width:130rpx;

font-size:28rpx;

color:#3b3c42;

.standard_text4{

height:80rpx;

line-height:80rpx;

float:left;

width:140rpx;

font-size:28rpx;

color:#3b3c42;

.standard_btn{

height:50rpx;

line-height:50rpx;

float:left;

border:1pxsolid#3891f8;

color:#3891f8;

width:50rpx;

text-align:center;

font-size:36rpx;

border-radius:60px;

margin-top:10rpx;

margin-left:60rpx;

.standard_icon{

height:60rpx;

width:60rpx;

margin-top:8rpx;

float:left;

margin-left:55rpx;

/*側(cè)滑刪除s*/

.main_item{

float:left;

width:100%;

background-color:#fff;

position:relative;

overflow:hidden;

height:40px;

line-height:40px;

.inner{

position:absolute;

top:0;

width:100%;

line-height:80rpx;

height:80rpx;

float:left;

.inner.txt{

background-color:#fff;

width:100%;

z-index:5;

transition:left0.2sease-in-out;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

.inner.del{

background-color:#e64340;

width:150rpx;

text-align:center;

z-index:4;

right:0;

color:#fff;

/*側(cè)滑刪除e*/

3.js

varapp=getApp();

Page({

/**

*頁(yè)面的初始數(shù)據(jù)

*/

data:{

currentTab:0,

BaseURL:app.globalData.BaseURL,//圖片后臺(tái)

mDate:'',

delBtnWidth:180//刪除按鈕寬度單位（rpx）

/**

*生命周期函數(shù)--監(jiān)聽頁(yè)面加載

*/

onLoad:function(options){

varthat=this;

that.getOrganizationTeamScore();//獲取標(biāo)準(zhǔn)積分

//獲取系統(tǒng)寬高信息

wx.getSystemInfo({

success:function(res){

that.setData({

winWidth:res.windowWidth,

winHeight:res.windowHeight

});

}

});

that.initEleWidth();//側(cè)滑刪除S

/*****************側(cè)滑刪除S*******************/

touchS:function(e){

if(e.touches.length==1){

this.setData({

//設(shè)置觸摸起始點(diǎn)水平方向位置

startX:e.touches[0].clientX

});

}

touchM:function(e){

if(e.touches.length==1){

//手指移動(dòng)時(shí)水平方向位置

varmoveX=e.touches[0].clientX;

//手指起始點(diǎn)位置與移動(dòng)期間的差值

vardisX=this.data.startX-moveX;

vardelBtnWidth=this.data.delBtnWidth;

vartxtStyle="";

if(disX==0||disX0){//如果移動(dòng)距離小于等于0，文本層位置不變

txtStyle="left:0px";

}elseif(disX0){//移動(dòng)距離大于0，文本層left值等于手指移動(dòng)距離

txtStyle="left:-"+disX+"px";

if(disX=delBtnWidth){

//控制手指移動(dòng)距離最大值為刪除按鈕的寬度

txtStyle="left:-"+delBtnWidth+"px";

}

}

//獲取手指觸摸的是哪一項(xiàng)

varindex=e.currentTarget.dataset.index

//varindex=e.target.dataset.index;

varlists=this.data.lists;

lists[index].txtStyle=txtStyle;

//更新列表的狀態(tài)

this.setData({

lists:lists

});

}

touchE:function(e){

if(e.changedTouches.length==1){

//手指移動(dòng)結(jié)束后水平位置

varendX=e.changedTouches[0].clientX;

//觸摸開始與結(jié)束，手指移動(dòng)的距離

vardisX=this.data.startX-endX;

vardelBtnWidth=this.data.delBtnWidth;

//如果距離小于刪除按鈕的1/2，不顯示刪除按鈕

vartxtStyle=disXdelBtnWidth/2"left:-"+delBtnWidth+"px":"left:0px";

//獲取手指觸摸的是哪一項(xiàng)

varindex=e.currentTarget.dataset.index

//varindex=e.target.dataset.index;

varlists=this.data.lists;

lists[index].txtStyle=txtStyle;

//更新列表的狀態(tài)

this.setData({

lists:lists

});

}

//獲取元素自適應(yīng)后的實(shí)際寬度

getEleWidth:function(w){

varreal=0;

try{

varres=wx.getSystemInfoSync().windowWidth;

varscale=(750/2)/(w/2);//以寬度750px設(shè)計(jì)稿做寬度的自適應(yīng)

//console.log(scale);

real=Math.floor(res/scale);

returnreal;

}catch(e){

returnfalse;

//Dosomethingwhencatcherror

}

initEleWidth:function(){

vardelBtnWidth=this.getEleWidth(this.data.delBtnWidth);

this.setData({

delBtnWidth:delBtnWidth

});

//點(diǎn)擊刪除按鈕事件

delItem:function(e){

//獲取列表中要?jiǎng)h除項(xiàng)的下標(biāo)

varindex=e.currentTarget.dataset.index

//varindex=e.target.dataset.index;

varlists=this.data.lists;

//移除列表中下標(biāo)為index的項(xiàng)

lists.splice(index,1);

//更新列表的狀態(tài)

this.setData({

lists:lists

});

/*****************側(cè)滑刪除e*******************/

/************************標(biāo)準(zhǔn)制定s***************/

/**獲取積分標(biāo)準(zhǔn)*/

getOrganizationTeamScore:function(){

varthat=this;

wx.request({

header:{

"Content-Type":"application/x-www-form-urlencoded"

},

method:'POST',

url:app.globalData.BaseURL+'group/v1/getOrganizationTeamScore.html',

data:{

organizationTeamID:anizationTeamID,

},

success:function(res){

wx.hideLoading();

console.log("獲取積分標(biāo)準(zhǔn)",res.data)

varstatus=res.data.status;

varinfo=

if(status.indexOf("SUCCESS")==0){

that.setData({

lists:info

})

}else{

wx.showToast({

title:'獲取失敗',

icon:'none'

})

}

}

})

/**刪除標(biāo)準(zhǔn)*/

delectOrganizationTeamScoreStandard:function(e){

varorganizationTeamScoreStandardID=e.currentTarget.dataset.id;

varthat=this;

wx.showModal({

title:'刪除此條標(biāo)準(zhǔn)記錄',

content:'是否刪除？',

success:function(res){

if(res.confirm){

console.log('用戶點(diǎn)擊確定')

wx.request({

header:{

"Content-Type":"application/x-www-form-urlencoded"

},

method:'POST',

url:app.globalData.BaseURL+'group/v1/delectOrganizationTeamScoreStandard.do',

data:{

organizationTeamScoreStandardID:organizationTeamScoreStandardID,

},

success:function(res){

varstatus=res.data.status;

varinfo=

if(status.indexOf("SUCCESS")==0){

wx.showToast({

title:'操作成功',

icon:'none'

})

that.getOrganizationTeamScore();

}else{

wx.showToast({

title:'數(shù)據(jù)使用中，無法刪除！',

icon:'none'

})

}

}

})

}elseif(res.cancel){

console.log('用戶點(diǎn)擊取消')

}

}

})

/**修改標(biāo)準(zhǔn)*/

editStanderClick:function(e){

varitem=e.currentTarget.dataset.item;

wx.navigateTo({

url:'/pages/My/Groupmanagement/Leanapproach/Employeeperformance/IntegralStandard/AddIntegrationProject/AddIntegrationProjectorganizationTeamID='+anizationTeamID+

'organizationTeamScoreStandardID='+item.ID+

'scoreStanderFixID='+item.scoreStanderFixID+

'itemName='+item.itemName+

'score='+item.score+

'unit='+item.unit+

'isEdit=1',

})

//添加積分項(xiàng)目