用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

小程序拖拽功能實現,以及無法點擊的bug

Rolan 2020-6-10 00:41

小程序自帶拖拽組件movable-area(父容器) # movable-view (移動容器)這兩個組件要配合使用才行,解釋一下 :movable-area 相當于是一個區域容器,只有在 movable-area覆蓋的區域才能移動?。?!,movable-view 就是移動容 ...

movable-area(父容器) # movable-view (移動容器)

這兩個組件要配合使用才行,
解釋一下 :
movable-area 相當于是一個區域容器,只有在 movable-area覆蓋的區域才能移動?。?!,
movable-view 就是移動容器,實際拖拽移動的距離就是它在移動,把你要移動的內容放在movable-view里面即可

實際代碼結構是這樣的 :

  1. /wxml
  2. <movable-area class="" style="width: 75vw;height:67vh;position: fixed;top:100rpx ;left: 0;z-index: 9;">
  3. <movable-view style="" x="{{250}}" y="{{450}}" direction="all"> //x 和 y 代表初始位置 direction可移動的方向 all為 垂直水平都可以
  4. // 你要移動的視圖放這里
  5. </movable-view>
  6. </movable-area>

只要設置好movable-area的大小覆蓋區域, 即可隨便拖拽,

這里說一下小程序寫拖拽的坑;

坑1 : 卡頓

如果你是從web轉過來小程序,你可能會覺得,小程序的拖拽也跟web一個樣,給目標來個監聽事件,獲取響應的 X Y 的位移值,然后賦值給 目標容器, 這種方法雖然可行, 也最通俗易懂,

但是!!!! 別忘記了,小程序沒有dom 這一種東西, 并且 小程序 是有性能限制的,你使用了這種方法后,拖拽會非???,卡到爆那種; 為什么呢?
當你不斷的獲取XY坐標值進行 賦值, 在setData的時候,就會出現性能問題,move事件一秒鐘會觸發多次,那你就必須一秒鐘setData多次,這樣就違背了小程序的規則了,
只要懂點小程序的都知道 小程序中setData是有性能消耗問題的,不能大量進行setData;
聰明的小伙伴都知道 小程序官方 是建議小程序中不要頻繁的setData,以及data無關數據的冗余。
下面是小程序官方原話

setData 是小程序開發中使用最頻繁的接口,也是最容易引發性能問題的接口

所以不要使用這種方法

坑2: 遮罩層下的點擊事件無效

當你用 movable覆蓋完一個區域后,你會發現,處于 movable下的元素都無法點擊了,無法觸發點擊事件, 為啥子咧?

是一個很簡單的原因,你的 movable覆蓋在 目標元素上面,你點擊的時候只會觸發到 movable的事件函數,是不會觸發 movable下面的 元素的。
那怎么解決呢?事件傳遞?事件冒泡?事件委托?都不用?。。。?!
只需要幾行 css 代碼就搞定了

  1. /* css 寫法*/
  2. movable-area {
  3. pointer-events: none;
  4. }
  5. movable-view {
  6. pointer-events: auto;
  7. }
  1. /*less*/
  2. movable-area {
  3. pointer-events: none;
  4. movable-view {
  5. pointer-events: auto;
  6. }
  7. }

給movable-area 加個 pointer-events:none;
movable-view 加給pointer-events:auto;就行了
至于pointer-events 是什么意思的話?
我給出這樣的解答
來自 MDN

pointer-events CSS屬性 指定在什么情況下 (如果有) 某個特定的圖形元素可以成為鼠標事件的 target。

到這里你應該就學會小程序movable的拖拽了,我也不多說了,有疑問歡迎在下面提問;

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 雙笙_ 來自: 簡書
梦幻单人赚钱方法 20选5走势图开奖结果 股票开盘前可以买入 股票指数期货的交易 河内5分彩直播开奖 南方福彩双彩网 广西快三开奖官方同步 安徽快3中奖奖金多少 四川快乐12遗漏最大值 北京好的期货配资公司 双色球开奖结果查询果