怎么在vue中使用mint-ui框架
本篇文章給大家分享的是有關(guān)怎么在vue中使用mint-ui框架，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),祥符企業(yè)網(wǎng)站建設(shè),祥符品牌網(wǎng)站建設(shè),網(wǎng)站定制,祥符網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,祥符網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
mint-ui的特性
特性介紹
Mint UI 包含豐富的 CSS 和 JS 組件，能夠滿足日常的移動(dòng)端開發(fā)需要。通過它，可以快速構(gòu)建出風(fēng)格統(tǒng)一的頁(yè)面，提升開發(fā)效率。
真正意義上的按需加載組件?？梢灾患虞d聲明過的組件及其樣式文件，無需再糾結(jié)文件體積過大。
考慮到移動(dòng)端的性能門檻，Mint UI 采用 CSS3 處理各種動(dòng)效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。
依托 Vue.js 高效的組件化方案，Mint UI 做到了輕量化。即使全部引入，壓縮后的文件體積也僅有 ~30kb (JS + CSS) gzip。
這個(gè)組件庫(kù)，適合于基于vue的手機(jī)頁(yè)面開發(fā)。
1.cell的使用
先丟個(gè)圖↓
在做switch的時(shí)候，想做成文字和switch在列表的兩側(cè)。效果出不來，發(fā)現(xiàn)有很多人跟我一樣死命的鉆switch的文檔，以及找switch的相關(guān)資料。然后實(shí)際上，應(yīng)該用cell才對(duì)。
利用cell的布局，和switch相結(jié)合。產(chǎn)生下面的結(jié)果。
2.Infinite scroll 和 Navbar結(jié)合使用
Navbar 是這樣的↓
Infinite scroll 是這樣的↓
兩個(gè)結(jié)合起來，就是把Infinite scroll嵌套在 里面，然后效果就出來了。
簡(jiǎn)單的就是醬紫的。
選項(xiàng)一
選項(xiàng)二
這樣基本頁(yè)面就出來了。
有個(gè)小問題就是，這是一個(gè)頁(yè)面，滾動(dòng)條是共用的。也就是說，你在選項(xiàng)卡一拉出來好幾頁(yè)數(shù)據(jù)之后，再到選項(xiàng)卡二，滾動(dòng)條的位置是不會(huì)變的，你的選項(xiàng)卡二的內(nèi)容，會(huì)被拉出來好多頁(yè)的數(shù)據(jù)。如果某個(gè)選項(xiàng)卡的數(shù)據(jù)比較少，會(huì)影響到其他選項(xiàng)卡的數(shù)據(jù)加載。
這個(gè)問題，找了半天，最后發(fā)現(xiàn)一個(gè)和簡(jiǎn)單的辦法。在Infinite-Scroll里面，添加一個(gè)v-if=selected == id，把Infinite-scroll和選項(xiàng)卡的id、selected相結(jié)合，選中的selected與id對(duì)應(yīng)的時(shí)候，才進(jìn)行對(duì)應(yīng)的Infinite-Scroll。
Infinite-Scroll的代碼如下：
根據(jù)需要，v-if的條件進(jìn)行修改。
v-infinite-scroll 所綁定的方法，會(huì)在vue的mounted之后，before之前第一次執(zhí)行，不需要另外調(diào)用。
3.Picker，地址三級(jí)聯(lián)動(dòng)
這里有個(gè)很簡(jiǎn)潔的三級(jí)聯(lián)動(dòng)，之前要用的時(shí)候沒找到。自己寫的一個(gè)，好麻煩。先放圖
首先獲取地址
getRegion(){
var root=this;
http.get("/region").then(function (data) {
root.regionArr=data.data.data;
for(var i=0;i
for(var i=0;i
for(var i=0;i然后設(shè)置三級(jí)地址
onValuesChange(picker, values) {
var root=this;
var str_1=[];
var str_2=[];
for(var i in root.regionArr){
// 獲取省，并重置市級(jí)名稱
if(root.regionArr[i].value == values[0]){
for(var j in root.regionArr[i].children){
str_1.push(root.regionArr[i].children[j].value);
// 獲取市級(jí)，并重置區(qū)級(jí)的名稱
if(root.regionArr[i].children[j].value == values[1]){
// 當(dāng)市級(jí)下不存在區(qū)名市，置空。
if(root.regionArr[i].children[j].children != null){
for(var k in root.regionArr[i].children[j].children){
str_2.push(root.regionArr[i].children[j].children[k].value);
}
}else{
str_2.push(" ");
}
}
}
picker.setSlotValues(1, str_1);
picker.setSlotValues(2, str_2);
}
}
// 賦值，初始時(shí)置為上一頁(yè)返回的值
root.$set(root.printerMessage,'province',values[0] == null ? root.printerMessage.province : values[0]);
root.$set(root.printerMessage,'city',values[1] == null ? root.printerMessage.city : values[1]);
root.$set(root.printerMessage,'area',values[2] == null ? root.printerMessage.area : values[2]);
}以上就是怎么在vue中使用mint-ui框架，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站名稱：怎么在vue中使用mint-ui框架
文章位置：http://weahome.cn/article/jggpce.html
重慶分公司
重慶分公司
