uve (mui/light7)寫APP的使用心得(大坑);

話說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推薦一下,多謝!

來源：https://segmentfault.com/a/1190000015889407