SUI踩坑記錄

syoya 發布于2019-08-30 15:52 / 2450人閱讀

摘要：踩坑記錄最近做了個項目選型了和做單頁應用。下面記錄一下踩坑經歷介紹文檔是一套基于開發的庫。下面記錄一下主要的注意事項默認開啟了前端路由。如果需要禁用路由功能那么可以在之后之前使用來禁用相關的坑的有個可以自定義里面的內容但是把這塊刪了。

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默認開啟了前端路由。

如果需要禁用路由功能,那么可以在 zepto 之后, msui 之前使用

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

picker 相關的坑

Framework7的有個picker modal 可以自定義里面的內容, 但是SUI把這塊刪了。

picker 關閉的時候會全部刪除所有帶 .picker-modal class的元素。所以如果你自定義了個picker想復用樣式。。。。就悲劇了。。。所以還是復制樣式自定義個class吧

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);

}

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

如果我想只創建一個picker來應對n個輸入框則可以創建一個proxy的元素來實現


            
 

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("")
            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

GPU云服務器云服務器 SUI 初踩坑類踩坑必踩坑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116418.html

SUI踩坑記錄

摘要：踩坑記錄最近做了個項目選型了和做單頁應用。下面記錄一下踩坑經歷介紹文檔是一套基于開發的庫。下面記錄一下主要的注意事項默認開啟了前端路由。如果需要禁用路由功能那么可以在之后之前使用來禁用相關的坑的有個可以自定義里面的內容但是把這塊刪了。 SUI踩坑記錄最近做了個項目選型了SUI和vue做單頁應用。下面記錄一下踩坑經歷SUI 介紹 sui文檔：http://m.sui.taobao.or...

honhon 2019-08-20 13:51 評論0 收藏0
SUI踩坑記錄

摘要：踩坑記錄最近做了個項目選型了和做單頁應用。下面記錄一下踩坑經歷介紹文檔是一套基于開發的庫。下面記錄一下主要的注意事項默認開啟了前端路由。如果需要禁用路由功能那么可以在之后之前使用來禁用相關的坑的有個可以自定義里面的內容但是把這塊刪了。 SUI踩坑記錄最近做了個項目選型了SUI和vue做單頁應用。下面記錄一下踩坑經歷SUI 介紹 sui文檔：http://m.sui.taobao.or...

MadPecker 2019-08-01 16:14 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 評論0 收藏0
UI大全：前端UI框架集合（持續更新，當前32個）

摘要：簡潔直觀強悍的前端開發框架，讓開發更迅速簡單。是一套基于的前端框架。首個版本發布于年金秋，她區別于那些基于底層的框架，卻并非逆道而行，而是信奉返璞歸真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 評論0 收藏0