SUI踩坑記錄

MadPecker 發(fā)布于2019-08-01 16:14 / 2317人閱讀

摘要：踩坑記錄最近做了個(gè)項(xiàng)目選型了和做單頁(yè)應(yīng)用。下面記錄一下踩坑經(jīng)歷介紹文檔是一套基于開發(fā)的庫(kù)。下面記錄一下主要的注意事項(xiàng)默認(rèn)開啟了前端路由。如果需要禁用路由功能那么可以在之后之前使用來禁用相關(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 開發(fā)的UI庫(kù)。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發(fā)跨平臺(tái)Web App。 SUI 簡(jiǎn)單理解就是Framework7的閹割改造版。下面記錄一下主要的注意事項(xiàng)
SUI默認(rèn)開啟了前端路由。

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

$.config = {router: false}// 來禁用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打開的時(shí)候背后沒有蒙層，操作的時(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 沒有destroy方法，但是原始的Framework7是有的http://framework7.taobao.org/...

如果我想只創(chuàng)建一個(gè)picker來應(yīng)對(duì)n個(gè)輸入框則可以創(chuàng)建一個(gè)proxy的元素來實(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
    }

詳見我的博客https://www.56way.com

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/50384.html

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

登陸后可評(píng)論

0條評(píng)論

MadPecker

男|高級(jí)講師

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

TA的文章

換了云主機(jī)服務(wù)商為啥還要重新備案？

閱讀 1074·2021-11-22 13:53
程序員神器之Cmder

閱讀 1626·2021-11-17 09:33
你們要的3D太陽(yáng)系

閱讀 2425·2021-10-14 09:43
寶塔面板安裝小浣熊小說CMS

閱讀 2901·2021-09-01 11:41
【衡天云】香港站群服務(wù)器：低至1010元/月_新人專享價(jià)

閱讀 2304·2021-09-01 10:44
WordPress淘寶客插件推薦高效率獲取聯(lián)盟CPS鏈接

閱讀 2974·2021-08-31 09:39
長(zhǎng)路漫漫，唯劍作伴，每日3+1，從今天開始

閱讀 1475·2019-08-30 15:44
瀏覽器渲染的那些事（二）

閱讀 1885·2019-08-30 13:02

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

SUI踩坑記錄

相關(guān)文章