問(wèn)題場(chǎng)景

所謂懸浮窗就是圖中微信圖標(biāo)的按鈕，采用fixed定位，可拖動(dòng)和點(diǎn)擊。

這算是一個(gè)比較常見(jiàn)的實(shí)現(xiàn)場(chǎng)景了。

為什么要用cover-view做懸浮窗？原生組件出來(lái)背鍋了~

最初我做懸浮窗用的不是cover-view，而是view。

這是簡(jiǎn)化的代碼結(jié)構(gòu)：

index.wxml:<view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove"> <image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56"> </image></view><textarea placeholder='我是textarea組件，用來(lái)輸入一些信息'></textarea><view> 一大段test，占個(gè)位，表示下存在感</view>index.js:Page({ /** * 頁(yè)面的初始數(shù)據(jù) */ data: { left: 20, top: 250, isIos: true }, /** * 拖拽移動(dòng) */ setTouchMove: function (e) { if (e.touches[0].clientX > 0 && e.touches[0].clientY > 0) {  this.setData({  left: e.touches[0].clientX - 30,  top: e.touches[0].clientY - 30  }) } else {  this.setData({  left: 20, //默認(rèn)顯示位置 left距離  top: 250 //默認(rèn)顯示位置 top距離  }) } }, /** * 返回首頁(yè) */ goToHome: () => { wx.reLaunch({  url: '/pages/index/index', }) }})

為什么要用cover-view呢？

因?yàn)轫?yè)面上有個(gè)textarea組件，這個(gè)組件是原生組件，當(dāng)懸浮窗移動(dòng)到這個(gè)textarea組件上時(shí)，將無(wú)法繼續(xù)拖動(dòng)和點(diǎn)擊。

如果懸浮窗一開(kāi)始就定位在textarea上，那么就更慘了，一開(kāi)始就不能點(diǎn)擊和拖動(dòng)了。

這個(gè)原因時(shí)因?yàn)槲⑿判〕绦虻脑M件層級(jí)高于非原生組件，不是你修改幾下樣式就能解決的問(wèn)題。

這里就不講什么原生組件了，如果想進(jìn)一步了解，可以參考我之前寫(xiě)的一篇博客：微信小程序在ios下Echarts圖表不能滑動(dòng)的解決方案。

如果你的頁(yè)面上面沒(méi)有原生組件，那么像上面的代碼一樣用view做懸浮窗即可。

如果有，那么就可以跟著我繼續(xù)踩坑，使用cover-view這個(gè)原生組件層級(jí)的組件來(lái)做懸浮窗。

安卓下的cover-view拖動(dòng)起來(lái)，抖得不像帕金森，像是魔鬼的步伐

以下是我們修改為cover-view之后的代碼：

<cover-view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome" catchtouchmove="setTouchMove"> <cover-image class="img" src="https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=4294841024,3545417298&fm=179&app=42&f=PNG?w=56&h=56"> </cover-image></cover-view><textarea placeholder='我是textarea組件，用來(lái)輸入一些信息'></textarea><view> 一大段test，占個(gè)位，表示下存在感</view>