vue使用mui遇到的坑及解決

2022-03-26 19:00:15

使用mui遇到的坑記錄

主要用到webpack打包工具與mui，mint ui，其中mui有不少坑，在此記錄

先是用mui的tab元件做了個底部索引標籤，如下

不錯，樣式還行，但是後期發現切換選項的時候會報錯Unable to preventDefault inside passive event listener due to target being treated as passive，如下

但是這個錯誤並不會影響執行，但是我有強迫症，查閱資料發現是touch事件不能偵聽preventDefault的問題，就是觸發觸控事件時候引起的問題，可以簡單點給通配選擇器加個樣式touch-action:none，發現成功解決。

之後根據需求需要一個橫向捲動的導航欄，大概長這樣

要求可以區域捲動，mui很友好的給我們提供了這個元件，當然目前這個橫向捲動的例子似乎沒在官網上，需要我們下載官方的檔案，github網址https://github.com/dcloudio/mui 裡面可以找到這個案例

路徑可以在圖中看到，可以雙擊點開檢視

廢話不多說，然後官方要求載入js檔案，ok直接引入，之後我用webpack打包後發現報錯了

Uncaught TypeError: ‘caller’,‘callee’,and ‘arguments’ properties may not be accessed on strict mode

於是查閱資料發現webpack預設使用js的嚴格模式，但mui有些並不是嚴格模式，所以需要修改一下，安裝babel包並進入 .babelrc 檔案新增程式碼

transform-remove-strict-mode

問題解決，之後又需要指定初始化捲動位置，根據官方檔案需要使用scrollTo(x,y,time)函數，ok，直接複製過來，問題來了，

Uncaught TypeError: (0 , _muiMin2.default)(…).scroll(…).scrollTo is not a function

找了半天資料發現要在mounted勾點函數中使用，因為在此之前改元件還未完全渲染完成，放created中都不行（我大多數時候習慣在created中處理業務）。

可是問題又來了，頭都要爆炸了，設定初始捲動位置後，發現滑動一下就空白了，後來發現是scrollTo的引數要求要數位型別，而我給的是字串型別，用parseInt轉換一下即可。

隨著我的內容越來越多，出現了卷軸，後面發現在手機上無法上下捲動，只能左右捲動之前的導航欄元件，後面發現之前設定的touch-action可以設定多種屬性，於是我發現了pan-y這個屬性，用於啟用單指垂直平移手勢，設定之後發現，沒有之前的Unable啥的錯誤，也可以上下捲動了。

沒錯，問題又來了，我點選底部的索引標籤發現不能切換，查閱資料才發現這是因為類名mui-tab-item衝突的問題

把mui-tab-item 的樣式複製過來，然後改一下類名，可以改mui-tab-item-s之類的不容易混亂

在主元件中（一般是app元件）加入如下程式碼

mounted() {
            mui('body').on('tap', 'a', function () {
                document.location.href = this.href;
            });
        }

注意，一定要在mounted勾點函數中使用。

還有個小問題，vue的捲動事件問題，若父容器設定了overflow:hidden，使用onscroll繫結事件會無效，若不想改變父容器overflow屬性，可以用

addEventListener('scroll',function(){},true)

注意加上true參數列示捕獲模式（該函數詳情可參考事件冒泡）。

到此，目前已發現的問題已解決

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。