話說mui這個框架的UI確實挺好看的(個人覺得)
所以項目使用了他,結果里面的坑太TM多,不得不說MUI做東西太不用心了,社區不活躍,提問都沒人管!;

mui第一個坑:

日期選擇器默認值無效:
使用代碼跟蹤找到里面實現的方法,里面方法確實沒毛病,但是callback不會執行!
比如設置日期選擇器默認值;

picker.setSelectedValue("2018-06-06")

你會驚奇的發現:只是設置了年份的默認值

代碼:

changeDate: function () {let option = {type: "date",beginYear:1950,endYear:2050,value: '2019-10',};let DatePicker = new mui.DtPicker(option);DatePicker.setSelectedValue("1988-11-01",100,function () {});DatePicker.show(function (selectItem) {console.log(selectItem);}); },解決辦法:使用定時器一個個的設置;

mui第二個坑:

picker 回調不執行!

picker.pickers[0].setSelectedIndex(index,500,function(){alert('callback'); //不執行});

對于這個坑我也就呵呵了,這也就是出現時間設置默認值月份設置不上的原因;
沒找到解決辦法,mui社區提交Bug無人問津,唉!

mui第三個坑:

setSelectedValue/setSelectedIndex設置第二個值無效,
對這個我更就無語了!
比如:

picker.pickers[0].setSelectedValue('北京市'); picker.pickers[1].setSelectedValue('海淀區');//你會驚奇的發現 只是設置了北京市 之后變換思路 使用setSelectedIndex 結果也一樣

解決辦法:

var picker = new mui.PopPicker({layer: 3});picker.setData(cityData);let address = that.withdrawal.address.split('-');for(var index in cityData) {let item1 = cityData[index];if(address[0] == item1.text) {picker.pickers[0].setSelectedIndex(index);for(var index2 in item1.children){let item2 = item1.children[index2];if(address[1] == item2.text){pcker.pickers[1].setSelectedIndex(index2);for(var index3 in item2.children){let item3 = item2.children[index3];if(address[2] == item3.text){picker.pickers[2].setSelectedIndex(index3);}}}}} }

解決辦法:
使用for in 遍歷之后使用

mui第四個坑;

上拉加載下拉刷新無效:
不知道是我代碼的問題還是什么問題,反正就是沒解決,最后參考餓了么App,使用點擊加載更多內容!

mui第五個坑:

輪播圖無效:
當你切換路由后頁面輪播圖就會卡主,解決辦法 在vue生命周期函數中執行

mui第六個坑:

mui('#refreshContainer').pullRefresh().endPulldown();
報錯 undefined
沒有解決;

mui第七個坑:

mui('.mui-scroll-wrapper').scroll().scrollToBottom(0,0,100); 居然無效 呵呵;

mui第八個坑;

<router-link></router-link> 在wap中無法跳轉,
因為mui禁用了a跳轉,所以在wap中無法使用,
解決辦法很簡單,使用js跳轉,唉 心累啊 果斷換框架

light7中坑比較少,

light7第一個:

頁面必須有.page元素 否則報錯;
解決辦法:很簡單,就是給每個組件添加一個div.page

light7第二個坑

如果路由模式是hash模式;
就會報錯,我就給改成History,改成History之后,無法打包成APP,
解決辦法:修改全區配置關閉路由

$.config = {autoInit: true,router:false,}

light7第三個坑

頁面中使用了panel里面如果有跳轉而且跳轉到的頁面有上拉加載和下拉刷新的話會無法使用
解決辦法:
原因就是因為你跳轉之后panel并沒有關閉,但是你如果使用 $.closePanel();的話是無效的;
在頁面加載的一瞬間打開panel再關閉

$.openPanel("#panel"); $.closePanel();

第二個解決辦法:
就是不在panel里面使用a/router-link跳轉,而是給他加@click="toPage(url)"
在toPage方法中關閉panel,之后this.$router.push();
這個辦法自己沒試過,猜想應該是可行的!

第三個解決辦法:
目前這個辦法應該是最好的了,
既解決了跳轉之后無法使用上拉下拉,又使用了a/router-link,就是在跳轉的時候先執行一個事件,關閉panel,之后再執行跳轉,完美解決!

<router-link @click.native="closePanel" tag="a" to="/collection" external ><li class="item-content item-link"><div class="item-media"><i class="icon icon-f7"></i></div><div class="item-inner"><div class="item-title">我的收藏</div></div></li> </router-link> <script>export default {name:'panel',methods:{closePanel:function () {console.log('asdad');$.closePanel();}}} </script>

更多坑正在挖掘中....(一起跳坑的加群: 814270669)

心累啊,好看的UI都有一堆的坑;

要是大家有好看的ios風格的ui推薦一下,多謝!

總結

以上是生活随笔為你收集整理的uve (mui/light7)写APP的使用心得(大坑);的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。