使用mui遇到的坑記錄

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

先是用mui的tab組件做了個(gè)底部選項(xiàng)卡，如下

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

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

之后根據(jù)需求需要一個(gè)橫向滾動(dòng)的導(dǎo)航欄，大概長(zhǎng)這樣

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

路徑可以在圖中看到，可以雙擊點(diǎn)開查看

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

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

于是查閱資料發(fā)現(xiàn)webpack默認(rèn)使用js的嚴(yán)格模式，但mui有些并不是嚴(yán)格模式，所以需要修改一下，安裝babel包 并進(jìn)入 .babelrc 文件 添加代碼

transform-remove-strict-mode

問題解決，之后又需要指定初始化滾動(dòng)位置，根據(jù)官方文檔需要使用scrollTo(x,y,time)函數(shù)，ok，直接復(fù)制過來，問題來了，

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

找了半天資料發(fā)現(xiàn)要在mounted鉤子函數(shù)中使用，因?yàn)樵诖酥案慕M件還未完全渲染完成，放created中都不行（我大多數(shù)時(shí)候習(xí)慣在created中處理業(yè)務(wù)）。

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

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

沒錯(cuò)，問題又來了，我點(diǎn)擊底部的選項(xiàng)卡發(fā)現(xiàn)不能切換，查閱資料才發(fā)現(xiàn)這是因?yàn)轭惷鹠ui-tab-item沖突的問題

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

方法1

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

方法2

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

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

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

還有個(gè)小問題，vue的滾動(dòng)事件問題，若父容器設(shè)置了overflow:hidden，使用onscroll綁定事件會(huì)無效，若不想改變父容器overflow屬性，可以用

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

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

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論