【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序滴滴中銀行卡管理模塊左滑出現(xiàn)刪除和編輯的示例分析

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】微信小程序滴滴中銀行卡管理模塊左滑出現(xiàn)刪除和編輯的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序滴滴中銀行卡管理模塊左滑出現(xiàn)刪除和編輯的示例分析，在下覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。最近在類(lèi)似于滴滴軟件的一款小程序，工程確實(shí)有點(diǎn)大，很多東西都是第一次做。這次記錄一下關(guān)于左滑刪除的一個(gè)代碼記錄。主要的思想就是計(jì)算滑動(dòng)距離的大小來(lái)使用css中的transition控制滑動(dòng)的效果，主流的都是控制邊距margin來(lái)達(dá)到左滑的效果。根據(jù)我所拿到的ui，我所運(yùn)用的是使用寬度和radius來(lái)達(dá)到左滑的效果，造一個(gè)屬性值，并塞進(jìn)遍歷數(shù)組進(jìn)行判斷是true還是false來(lái)控制樣式。完成效果：html<view

class='content'>

<view

class='item-box'

wx:for="{{bankList}}"

wx:key="index">

<view

class="card-item

{{item.txtStyle=='true'

?

'txtStyleFalse':'txtStyleTrue'}}"

bindtouchstart="touchS"

bindtouchmove="touchM"

bindtouchend="touchE"

data-index="{{index}}">

<view

class='bank'>{{item.bank}}</view>

<view

class='names'>{{s}}</view>

<view

class='card-num'>{{item.cardNum}}</view>

</view>

<view

class='handle

flex-box-start-top'>

<view

class='edit'>編輯</view>

<view

class='delect'>刪除</view>

</view>

</view>

</view>js/**

*

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

*/

data:

{

bankList:[

{

'bank':'中國(guó)建設(shè)銀行（建安支行）',

'names':'章三',

'cardNum':'*****

*******

*****

***0910'

},

{

'bank':

'中國(guó)工商銀行（建安支行）',

'names':

'章三',

'cardNum':

'*****

*******

*****

***0910'

},

],

editIndex:

0,

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

},

/*自定義方法--start

*/

//

touchS:

function

(e)

{

if

(e.touches.length

==

1)

{

this.setData({

stX:

e.touches[0].clientX

});

}

},

touchM:

function

(e)

{

console.log("touchM:"

+

e);

var

that

=

this

if

(e.touches.length

==

1)

{

//記錄觸摸點(diǎn)位置的X坐標(biāo)

var

moveX

=

e.touches[0].clientX;

//計(jì)算手指起始點(diǎn)的X坐標(biāo)與當(dāng)前觸摸點(diǎn)的X坐標(biāo)的差值

var

disX

=

that.data.stX

-

moveX;

//delBtnWidth

為右側(cè)按鈕區(qū)域的寬度

var

delBtnWidth

=

that.data.delBtnWidth;

var

txtStyle

=

"true";

if(disX

==

0

||

disX

<

0){

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

width:

660rpx;border-radius:

10rpx;

//

txtStyle

=

"left:0px";

txtStyle

=

"true";

}else

if(disX

>

0

){

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

width:

470rpx;border-radius:

10rpx

0px

0px

10rpx;

//

txtStyle

=

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

txtStyle

=

"false";

//

if(disX>=delBtnWidth){

//

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

//

txtStyle

=

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

//

}

}

//獲取手指觸摸的是哪一個(gè)item

var

index

=

e.currentTarget.dataset.index;

var

list

=

that.data.bankList;

//將拼接好的樣式設(shè)置到當(dāng)前item中

list[index].txtStyle

=

txtStyle;

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

this.setData({

bankList:list

});

//

console.log(this.data.bankList)

}

},

touchE:

function

(e)

{

console.log("touchE"

+

e);

var

that

=

this

if

(e.changedTouches.length

==

1)

{

//手指移動(dòng)結(jié)束后觸摸點(diǎn)位置的X坐標(biāo)

var

endX

=

e.changedTouches[0].clientX;

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

var

disX

=

that.data.stX

-

endX;

var

delBtnWidth

=

that.data.delBtnWidth;

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

var

txtStyle

=

disX

>

delBtnWidth/2

?

"true":"false";

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

var

index

=

e.currentTarget.dataset.index;

var

list

=

that.data.bankList;

list[index].txtStyle

=

txtStyle;

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