当前位置: 首页 > Web前端 > HTML

SUI踩坑记录

时间:2023-04-02 21:42:37 HTML

SUI踩坑记录最近做了一个项目,选择了SUI和vue作为单页应用。记录一下踩坑的经历吧。SUI介绍sui文档:http://m.sui.taobao.org/SUIMobile是一套基于Framework7开发的UI库。非常轻巧优雅,只需导入我们的CDN文件即可使用,兼容iOS6.0+和Android4.0+,非常适合开发跨平台WebApps。简单理解SUI就是Framework7的阉割版。让我们记录一下主要的注意事项。SUI默认启用前端路由。如果需要关闭路由功能,可以在zepto之后,msui之前使用$.config={router:false}//来关闭routerpicker相关的陷阱。Framework7有一个pickermodal可以自定义里面的内容,但是SUI把这个删掉了。关闭选择器时,将删除带有.picker-Modal类的所有元素。所以如果你自定义了一个picker并且想复用这个style。...这是一个悲剧。..所以最好是照搬样式,自定义一个类。打开采摘器时,后面没有口罩。如果页面链接在运行过程中被污染,则直接跳过。解决方法很简单。打开采摘元件时,SUI会向身体添加一个。with-picker-modal类,我们给这个类添加一个伪元素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个输入框,我可以创建一个代理元素来实现

varproxyPicker={ele:null,init:function(){this.ele=$("#proxyPickerBox");},open:function(item){if(item===this.targetEle){这个。input.picker("打开");返回;}this.destory();this.ele.append("")this.input=this.ele.find("input");this.targetEle=item;var数据数据=item.d数据;变量值=[];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()];调试器;项目.showValue=proxyPicker.input.val();console.log(proxyPicker.input.val());},});this.input.picker("打开");},destory:function(){this.targetEle=null;this.ele.html("");this.picker=null;},targetEle:null}详见我的博客https://www.56way.com