SUI踩坑记录

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