最初打算使用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...