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

2022-09-29 22:03:26 字數 830 閱讀 5036

最初打算使用scroll-view實現,效果好、流暢、有慣性滑動,但由於滾動條沒法去掉、無法實現上下層的幀布局,最終放棄了。

還是自己寫個吧,利用手勢事件。遺憾的是小程式中目前沒有像android中快速滑動事件,所以,要實現慣性滑動是不可能了。

item的布局:

推薦小程式優先使用flex布局,完全夠用。這也是微信推薦的。 }

- 1

+ 程式設計客棧"unit">¥

"price">99.80

確定 刪除

主要是將刪除按鈕的設為絕對定位(position: absolute):

.item .remove

page(,]

}, drawstart : function(e)

key = true;

}, drawend : function(e)else

} this.setdata();

}, drawmove : function(e)

} }else

} }

self.setdata();

} },

//刪除item

delitem: function(e)

} this.setdata();

}, onload: function ()

})drawstart用於記錄手指觸碰時的位置,drawmove記錄手指滑動的位置,兩者的差值就是刪除按鈕的偏移量

drawend手指抬起時觸發,用於設定彈回、攤開效果。目前我的是超過一半自動彈開,不足一半自動收回。

本文標題: 微信小程式實現滑動刪除效果

本文位址:

微信小程式 滑動刪除

vant ui 框架位址 usingcomponents 2 vant裡面的滑動的操作方法直接使用 left width img 內容 button 的大盒子 wrk img img 渲染的 wrk image src wrk name wrk top 標題 name 渲染的標題 爆款背心 wrk ...

微信小程式 資料滑動刪除效果 左滑出刪除按鈕效果

實現效果 元 m view class hui place view class tag class lpspan red text class lpspan tagico wx for wx for item t wx key key text view view view class del c...

微信小程式實現彈幕效果

主要原理是使用的css3的動畫效果。wxml class doommview wx for wx key id wx if class aon style animation first s linear forwards top color text block view class button...