最近公司項目需要在H5頁面上懸浮一個按鈕，同時要求按鈕是可以拖動的并且需要可以自動貼邊，無奈前端小夥伴不怎麼給力，無奈隻能我頂上了。我覺得這種情況應該可以抽出一個元件，這次就仔細探讨一下懸浮按鈕的實作原理吧。
因為平時我在開發過程中，手機端的開發我都推薦公司小夥伴使用uniapp進行，這次的自然也是在uniapp的環境下開發的元件，uniapp本身使用了小程式rpx作為機關。對于之前從來沒使用過的小夥伴來說應該有點陌生，那我先解釋一下這個rpx的機關是什麼。
rpx機關一開始是微信小程式主推的，目的其實也很簡單，因為手機螢幕有大有小，為了适應不同的螢幕才導緻這個機關的出現。具體是這麼定義的：
規定螢幕寬為750rpx。如在 iPhone6 上，螢幕寬度為375px，共有750個實體像素，則750rpx = 375px = 750實體像素，1rpx = 0.5px = 1實體像素。
有了定義以後，也就有了計算的算法了，最終就得到了1rpx=0.5px，接下來就來說說懸浮按鈕的實作過程吧。
首先，先使用一個view标簽，也就是pc端的div，view是uniapp自己定義的一個标簽，最終H5會編譯成div小程式會編譯成view。接下來自然就是view标簽的css樣式，其實也簡單，因為整個view隻是盒子而已。
整個盒子的z-index指派為1000，也就浮在了最上層了。同時使用了固定定位整個盒子，因為之後要動态去修改整個盒子的位置，實作拖動效果。同時盒子使用flex布局，将内部的其他标簽居中。我現在的做法是在内部放一個GIF圖檔，也算是滿足需求了。
要怎麼計算位置？一開始，我給view使用的是絕對定位，是以隻需要将每次拖動圖示是的x,y軸的位置動态指派給整個view，那麼就實作了移動，xy分别指派給top和left。我們在手機端的時候H5view标簽有幾個方法我們可以使用，一個是touchmove一個是touchend。
touchmove方法就是手指按着view然後移動觸發的方法，它有一個形參，形參有一堆參數，你看：
其實，我們隻需要使用touches資料的第一個資料即可，這裡的clientX就是x軸的值，clientY就是y軸的值。隻要手指移動，這個函數就會被觸發。是以我要去綁定這個方法，動态去修改top和left的值，動态給view的style指派以後，自然它就跟着手指移動了。
當然，我在定義元件的時候還動态給整個元件指派了一些margin-top的值什麼的，自然是需要加上去的。最終實作的效果就是：
在移動view以後，萬一使用者将整個view移出了螢幕了怎麼辦？隻要移出去以後就再也移不回來了。是以，就必須要說另一個方法touchend了。
touchend這個方法會在使用者長按拖動并釋放後觸發，為了防止使用者将整個view拖的無影無蹤，是以必須要使用者拖放結束後去人為計算使用者的拖動是不是超出了邊界，如果超出了邊界就将top和left指派成我們能接受的最大值。自然，在判斷的過程中，要去計算X軸也必須計算Y軸，看是什麼軸超出了就給置為最大的能接受值就能防止使用者将整個view拖出視野，當然，我們在做着一切的時候必須要做一件事！那就是擷取目前手機螢幕的xy的最大值，手機是有大有小，那怎麼去擷取呢？
我們使用uniapp的API：uni.getSystemInfoSync()，将整個螢幕的安全區域指派給xy軸最大的能接受的值。
在touchend觸發後這個函數也有個形參，參數和move是一樣的，那麼我們去計算就可以了
通過計算後複制，那麼使用者永遠也不能将整個盒子拖出安全區域了。
最後說說貼邊
因為就目前來說，需要貼邊的其實也就貼左邊或者貼右邊。是以隻需要在touchend函數中去判斷，如果超過了螢幕寬度的一半那麼就貼右邊，小于一半就貼左邊即可。