使用mui遇到的坑記錄

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

先是用mui的tab組件做了個底部選項卡，如下

不錯，樣式還行，但是后期發(fā)現(xiàn)切換選項的時候會報錯Unable to preventDefault inside passive event listener due to target being treated as passive，如下

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

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

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

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

廢話不多說，然后官方要求加載js文件，ok直接引入，之后我用webpack打包后發(fā)現(xiàn)報錯了

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

于是查閱資料發(fā)現(xiàn)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

找了半天資料發(fā)現(xiàn)要在mounted鉤子函數中使用，因為在此之前改組件還未完全渲染完成，放created中都不行（我大多數時候習慣在created中處理業(yè)務）。

可是問題又來了，頭都要爆炸了，設置初始滾動位置后，發(fā)現(xiàn)滑動一下就空白了，后來發(fā)現(xiàn)是scrollTo的參數要求要數字類型，而我給的是字符串類型，用parseInt轉換一下即可。

隨著我的內容越來越多，出現(xiàn)了滾動條，后面發(fā)現(xiàn)在手機上無法上下滾動，只能左右滾動之前的導航欄組件，后面發(fā)現(xiàn)之前設置的touch-action可以設置多種屬性，于是我發(fā)現(xiàn)了pan-y這個屬性，用于啟用單指垂直平移手勢，設置之后發(fā)現(xiàn)，沒有之前的Unable啥的錯誤，也可以上下滾動了。

沒錯，問題又來了，我點擊底部的選項卡發(fā)現(xiàn)不能切換，查閱資料才發(fā)現(xiàn)這是因為類名mui-tab-item沖突的問題

mui的js沖突了,有2種解決方法

方法1

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

方法2

在主組件中（一般是app組件）加入如下代碼

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

注意，一定要在mounted鉤子函數中使用。

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

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

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

到此，目前已發(fā)現(xiàn)的問題已解決

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論