微信小程式 滑動刪除

2021-10-09 02:36:14 字數 1749 閱讀 3335

vant ui 框架位址

"usingcomponents"

:,

2:vant裡面的滑動的操作方法直接使用

"}" left-width=

"}">

<

!-- img 內容 -----button **的大盒子 -->

"wrk_img"

>

<

!-- img----- 渲染的-->

"wrk_image" src=

"}">

"wrk_name"

>

"wrk_top"

>

<

!-- 標題 name----- 渲染的標題 爆款背心-->

"wrk_text"

>

}<

!-- **----- 渲染的** ¥49 -->

"wrk_price"

>

<

!-- ** -->¥}

"wrk_right"

>

"wrk_delete"

>

<

!-- 刪除 按鈕 ----- 渲染的 vant元件庫 icon的刪除圖示-->

"50rpx" color=

"red" name=

"delete" bindtap=

"delitemfn" data-index=

"}" />

<

!-- 加減 +++++------渲染的 vant元件庫 的button -->

"wrk_btn"

>

<

!-- 減數量的操作 -->

"wrk_btn1" catchtap=

"delcount" data-index=

"}">

-<

!--

"content"

>

} -->

<

!-- 刪除icon的圖示 刪除-->

"del" catchtap=

"del" data-index=

"}">

<

!-- 資料的幾條 minbuynumber-->

"wrk_number"

>

}<

!-- 加數量的操作 -->

"wrk_btn2" data-index=

"}" bindtap=

"addcount"

>+

"delee" bindtap=

"weidel" slot=

"right"

>刪除

//滑動的時候 刪除一項資料

//滑動刪除

weidel(e)

= this.data;

let index = e.currenttarget.dataset.index

wrklist.splice(index, 1)

; // 商品總價

let count = 0

this.data.wrklist.foreach(element =

>);

this.setdata(

)},

微信小程式實現滑動刪除效果

最初打算使用scroll view實現,效果好 流暢 有慣性滑動,但由於滾動條沒法去掉 無法實現上下層的幀布局,最終放棄了。還是自己寫個吧,利用手勢事件。遺憾的是小程式中目前沒有像android中快速滑動事件,所以,要實現慣性滑動是不可能了。item的布局 推薦小程式優先使用flex布局,完全夠用。...

微信小程式開發 滑動操作

在實際應用中,當某種手勢被觸發後,在使用者沒有放開滑鼠或手指前,會一直識別為該手勢。比如當使用者觸發左滑手勢後,這時再向下滑動,仍要按照左滑手勢來處理。可以定義乙個標記來記錄第一次識別到的手勢,如果已識別出手勢,後續的滑動操作就可以忽略,直到使用者放開滑鼠或手指。放開滑鼠或手指操作可以通過繫結han...

微信小程式開發 滑動操作

在實際應用中,當某種手勢被觸發後,在使用者沒有放開滑鼠或手指前,會一直識別為該手勢。比如當使用者觸發左滑手勢後,這時再向下滑動,仍要按照左滑手勢來處理。可以定義乙個標記來記錄第一次識別到的手勢,如果已識別出手勢,後續的滑動操作就可以忽略,直到使用者放開滑鼠或手指。放開滑鼠或手指操作可以通過繫結 ha...