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

mui第一個坑:

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

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

你會驚奇的發(fā)現(xiàn):只是設(shè)置了年份的默認(rèn)值

代碼:

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);}); },解決辦法:使用定時器一個個的設(shè)置;

mui第二個坑:

picker 回調(diào)不執(zhí)行!

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

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

mui第三個坑:

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

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

解決辦法:

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,使用點擊加載更多內(nèi)容!

mui第五個坑:

輪播圖無效:
當(dāng)你切換路由后頁面輪播圖就會卡主,解決辦法 在vue生命周期函數(shù)中執(zhí)行

mui第六個坑:

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

mui第七個坑:

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

mui第八個坑;

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

light7中坑比較少,

light7第一個:

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

light7第二個坑

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

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

light7第三個坑

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

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

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

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

<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風(fēng)格的ui推薦一下,多謝!

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。