SUI踩坑記錄

honhon 發(fā)布于2019-08-20 13:51 / 2337人閱讀

摘要：踩坑記錄最近做了個(gè)項(xiàng)目選型了和做單頁(yè)應(yīng)用。下面記錄一下踩坑經(jīng)歷介紹文檔是一套基于開(kāi)發(fā)的庫(kù)。下面記錄一下主要的注意事項(xiàng)默認(rèn)開(kāi)啟了前端路由。如果需要禁用路由功能那么可以在之后之前使用來(lái)禁用相關(guān)的坑的有個(gè)可以自定義里面的內(nèi)容但是把這塊刪了。

SUI踩坑記錄

最近做了個(gè)項(xiàng)目選型了SUI和vue做單頁(yè)應(yīng)用。下面記錄一下踩坑經(jīng)歷
SUI 介紹

sui文檔：http://m.sui.taobao.org/
SUI Mobile 是一套基于 Framework7 開(kāi)發(fā)的UI庫(kù)。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開(kāi)發(fā)跨平臺(tái)Web App。 SUI 簡(jiǎn)單理解就是Framework7的閹割改造版。下面記錄一下主要的注意事項(xiàng)
SUI默認(rèn)開(kāi)啟了前端路由。

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

$.config = {router: false}// 來(lái)禁用router

picker 相關(guān)的坑

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

picker 關(guān)閉的時(shí)候會(huì)全部刪除所有帶 .picker-modal class的元素。所以如果你自定義了個(gè)picker想復(fù)用樣式。。。。就悲劇了。。。所以還是復(fù)制樣式自定義個(gè)class吧

picker打開(kāi)的時(shí)候背后沒(méi)有蒙層，操作的時(shí)候如果污點(diǎn)了頁(yè)面鏈接，就直接跳走了，解決辦法很簡(jiǎn)單，當(dāng)picker元素open的時(shí)候SUI會(huì)給body增加一個(gè) with-picker-modal的class，我們給這個(gè)class加一個(gè)偽元素
.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 沒(méi)有destroy方法，但是原始的Framework7是有的http://framework7.taobao.org/...

如果我想只創(chuàng)建一個(gè)picker來(lái)應(yīng)對(duì)n個(gè)輸入框則可以創(chuàng)建一個(gè)proxy的元素來(lái)實(shí)現(xiàn)


            
 

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
    }

詳見(jiàn)我的博客https://www.56way.com

GPU云服務(wù)器云服務(wù)器 SUI 初踩坑類踩坑必踩坑

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/81279.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

honhon

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

如何制作數(shù)碼管顯示程序

閱讀 2335·2021-10-08 10:04
通配符證書有什麼好處？常用通配符SSL證書有哪些？

閱讀 1115·2021-09-03 10:40
Codepen 每日精選（2018-4-14）

閱讀 1161·2019-08-30 15:53
移動(dòng)端解決方案學(xué)習(xí)記錄

閱讀 3319·2019-08-30 13:13
CSS外掛：Sass 之規(guī)則(Rules)和指令(Directives)

閱讀 2936·2019-08-30 12:55
拓端數(shù)據(jù)|避開(kāi)數(shù)據(jù)海洋的“暗礁”：識(shí)別用戶異常行為

閱讀 2290·2019-08-29 13:21
徹底搞懂js里的__proto__和prototype到底有什么區(qū)別？

閱讀 1368·2019-08-26 12:12
前端硬核面試專題之 HTML 24 問(wèn)

閱讀 2765·2019-08-26 10:37

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

SUI踩坑記錄

相關(guān)文章