微信小程序實現如絲般順滑的可移動懸浮按鈕(超簡單)
最近被用戶要求再每個頁面顯示一個懸浮按鈕實現業務,what fuck??!!!
雖然內心不願意,但是身體還是得接受。。
首先偷懶百度,發現網絡上都是自己捕捉touch事件做的,以我的經驗這種實現方式肯定一堆bug,並且頁面會卡頓,果斷不踩坑。希望大家也不要踩坑~
實現方案:我們可以利用微信小程序的內置組件輕鬆實現!
1.將整個屏幕用movable-area組件覆蓋,
2.在movable-area內部添加一個movable-view實現自由滑動。
3.重點:CSS屬性 pointer-events 。
代碼奉上:
wxml:
<movable-area class="movable-area">
<movable-view class="movable-view" direction="all">
</movable-view>
</movable-area>
wxss:
.movable-area{
pointer-events:none;// 這個屬性設置爲none,讓所有事件穿透過去
z-index: 100;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.movable-view{
pointer-events:auto;// 重設爲auto,覆蓋父屬性設置
height: 50px;
width: 50px;
background: red;
}
是不是非常簡單??
核心代碼就這麼點,業務實現就看你們自己了
如果需要每個頁面都有,寫個組件引入即可
實現了以後我立即就寫出文檔分享給大家了,希望大家可以少走彎路~~~
很討厭網上抄襲的文檔,百度一下到處都是一摸一樣的,噁心人。
原創不易,轉載請註明出處!!