小程序 movable-area 實現懸浮窗效果


最近做一個小程序 實現頁面內懸浮窗的效果 

給自己制定兩個方案:

1、通過一個自定義的組件,通過觸摸事件進行實現;

2、使用微信的movable移動組件實現;

第一種方案:

      結果:實現了 懸浮窗和自動靠齊一方的效果 

  問題:IOS上的觸摸事件支持的還可以,移動起來不是特別卡頓;但是安卓就不行了,卡頓嚴重;延遲特別明顯;

      注意:第一種方案要求配置高的機型 所以不適合現在的要求;

第二種方案:

      結果:同樣實現了懸浮窗和自動靠齊一方的效果 

  問題:movable需要制定寬和高,來規定子元素的移動區域;但是等於覆蓋了原有的頁面,點擊和一切對底部頁面操作都無效;

      注意:第二種方案可以實現很流暢的滑動效果,但是頁面內覆蓋了原有的層級,無法操作覆蓋的頁面;

最終,結合第二種方案的問題,想到了使用組件的方式來實現滑動和懸浮窗的效果,避免層級問題;

地址:https://github.com/Uhanxu/movable-area

由於時間有限,大家可以根據具體情況進行movable組件的邏輯優化,謝謝!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM