最近做一個小程序 實現頁面內懸浮窗的效果
給自己制定兩個方案:
1、通過一個自定義的組件,通過觸摸事件進行實現;
2、使用微信的movable移動組件實現;
第一種方案:
結果:實現了 懸浮窗和自動靠齊一方的效果
問題:IOS上的觸摸事件支持的還可以,移動起來不是特別卡頓;但是安卓就不行了,卡頓嚴重;延遲特別明顯;
注意:第一種方案要求配置高的機型 所以不適合現在的要求;
第二種方案:
結果:同樣實現了懸浮窗和自動靠齊一方的效果
問題:movable需要制定寬和高,來規定子元素的移動區域;但是等於覆蓋了原有的頁面,點擊和一切對底部頁面操作都無效;
注意:第二種方案可以實現很流暢的滑動效果,但是頁面內覆蓋了原有的層級,無法操作覆蓋的頁面;
最終,結合第二種方案的問題,想到了使用組件的方式來實現滑動和懸浮窗的效果,避免層級問題;
地址:https://github.com/Uhanxu/movable-area
由於時間有限,大家可以根據具體情況進行movable組件的邏輯優化,謝謝!