SUI踩坑記錄

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

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

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

$.config = {router: false}// 來禁用router

picker 相關(guān)的坑

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

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

picker打開的時候背后沒有蒙層，操作的時候如果污點了頁面鏈接，就直接跳走了，解決辦法很簡單，當(dāng)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);

}

picker 沒有destroy方法，但是原始的Framework7是有的http://framework7.taobao.org/...

如果我想只創(chuàng)建一個picker來應(yīng)對n個輸入框則可以創(chuàng)建一個proxy的元素來實現(xiàn)

<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

總結(jié)

以上是生活随笔為你收集整理的SUI踩坑记录的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。