SUI踩坑纪录

2024年5月3日 204次阅读 来源: 小无路

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

    原文作者：小无路
    原文地址: https://segmentfault.com/a/1190000008158781
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞