SUI踩坑記錄

SUI踩坑記錄

最近作了個項目選型了SUI和vue作單頁應用。下面記錄一下踩坑經歷
SUI 介紹

sui文檔：http://m.sui.taobao.org/
SUI Mobile 是一套基於 Framework7 開發的UI庫。它很是輕量、精美，只須要引入咱們的CDN文件就可使用，而且能兼容到 iOS 6.0+ 和 Android 4.0+，很是適合開發跨平臺Web App。 SUI 簡單理解就是Framework7的閹割改造版。下面記錄一下主要的注意事項
SUI默認開啓了前端路由。

1. 若是須要禁用路由功能,那麼能夠在 zepto 以後, msui 以前使用

   $.config = {router: false}// 來禁用router

picker 相關的坑

1. Framework7的有個picker modal 能夠自定義裏面的內容, 可是SUI把這塊刪了。

2. picker 關閉的時候會所有刪除全部帶 .picker-modal class的元素。因此若是你自定義了個picker想複用樣式。。。。就悲劇了。。。因此仍是複製樣式自定義個class吧

3. picker打開的時候背後沒有蒙層，操做的時候若是污點了頁面連接，就直接跳走了，解決辦法很簡單，當picker元素open的時候SUI會給body增長一個 with-picker-modal的class，咱們給這個class加一個僞元素
   .with-picker-modal:before{

   content:" ";
   display:block;
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:100%;
   z-index: 11400;
   background-color:rgba(0,0,0,.6);

   }

4. picker 沒有destroy方法，可是原始的Framework7是有的http://framework7.taobao.org/...

若是我想只建立一個picker來應對n個輸入框則能夠建立一個proxy的元素來實現

<div id="proxyPickerBox" class="hide">
            <input type="text" />
 </div>

var proxyPicker = {
        ele:null,
        init:function(){
            this.ele = $("#proxyPickerBox");
        },
        open:function(item){
            if(item ===this.targetEle){
                this.input.picker("open");
                return;
            }
            this.destory();
            this.ele.append("<input type='text' value=''/>")
            this.input = this.ele.find("input");

            this.targetEle = item;
            var dataData = item.dataData;
            var values = [];
            dataData.forEach(function(v){
                values.push(v.text);
            })
            this.input.val(item.showValue||values[0]);
            this.input.picker({
                        cols: [
                            {
                                textAlign: 'center',
                                values: values,
                            }
                        ],
                        onClose: function () {
                            item.dataValue=item.textMap[proxyPicker.input.val()];
                            debugger;
                            item.showValue=proxyPicker.input.val();
                            console.log(proxyPicker.input.val());
                        },

                    }
            );
            this.input.picker("open");
        },
        destory:function(){
            this.targetEle=null;
            this.ele.html("");
            this.picker = null;
        },
        targetEle:null
    }

詳見個人博客https://www.56way.com