近期上手vue的移動端項目，舍棄了之前自己相對熟悉的mui框架，改為用餓了么團隊為了vue量身定做的mint-ui框架。
之前開發的時候覺得mui的文檔就足夠坑爹了，但當我開始閱讀mint-ui這個文檔后才發現自己真是太年輕了...
針對一些自己遇到的問題，特此記錄成文檔，方便日后使用。
swipe組件
因為項目加載eslint的緣故也就沒有像之前的項目一樣引用swiper框架。
這個輪播圖的組件文檔實在是不敢恭維（盡管其他的文檔也好不到哪里去），官方給出的參數真是少的可憐，一些方法也并沒有提到。
官方的api如下圖所示，你懂的：
仔細的看了的這個組件的example后，會找到一些常用的方法。
1、輪播默認不播放
需要將auto的值設置為0
2、輪播圖的手動控制
利用vue的ref先綁定引用的swipe根標簽。
<mt-swipe ref="swipe" class="swipe" :auto="0">
<mt-swipe-item v-for="img in images" :key="img.id">
<img :src="img.url"/>
</mt-swipe-item>
</mt-swipe>
然后利用ref綁定的swipe組件，我們就可以調用到其內部的一些控制方法：
this.$refs.swipe.next() // 轉到下一張輪播圖 this.$refs.swipe.prev() // 轉到前一張輪播圖
接下來恐怕就是我找到的最重要的方法：監控當前輪播圖激活的索引值
swipe組件的當前索引值被保存在了index之中
我們就可以利用剛才的方法，先在vue每次更新dom的時候將當前激活的索引值保存起來：
beforeUpdate () {
this.activeIndex = this.$refs.swipe.index
}
然后利用watch方法監控當前swipe的激活索引值就可以進行進行后續的處理了。
watch: {
activeIndex: function (val, oldVal) {
console.log('newIndex: %s, oldIndex: %s', val, oldVal)
// TODO
}
}
這樣swipe組件的一些基本操作總算是填坑完畢了。
picker組件
picker組件也是有很多問題。話不多話，先上官方api：
繼續針對slots對象數組的字段說明：
在使用過程之中我們會發現如果直接初始化級聯picker中的二級初始值會有問題。
因為按照其demo之中的初始化數據方法，必須使用數組中的索引值做初始化處理。針對一級菜單做defaultIndex處理是沒有問題，但是二級的話我們還需要將values值指向當前二級數組之中去。
addressSlots: [
{
flex: 1,
values: Object.keys(address),
className: 'slot1',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['北京'],
className: 'slot3',
textAlign: 'center'
}
]
避免在created之中單獨為addressSlots做數據處理，我們可以統一將一級和二級都指向默認的第一個參數，然后利用下面的方法做初始化處理：
mounted () {
this.$nextTick(() => {
setTimeout(() => {
// 利用索引初始化默認選中的省份和城市
this.areaSlots[0].defaultIndex = provinceIndex // Number類型
this.areaSlots[2].defaultIndex = cityIndex
}, 20)
})
}
bug處理
Infinite scroll組件的加載多次問題
官方例子的方法在一次滾動后并不止加載一次，應該在loading之中屏蔽新的加載處理：
loadMore () {
this.loading = true
setTimeout(() => {
// TODO
this.loading = false
}, 2500)
}
進行改進：
loadMore () {
// 防止多次加載
if (this.loading) {
return false
}
this.loading = true
setTimeout(() => {
// TODO
this.loading = false
}, 2500)
}
tabContainer和loadMore的滑動沖突處理
雖然這兩個滑動一起使用的效果很蛋疼，但是如果tabContainer的高度值不能撐滿整個屏幕的話，是無法在上下拉刷新的同時左右滑動的需要使用css進行高度處理才可以進行左右滑動：
.mint-tab-container-wrap{
min-height: 617px; // 需要設置最小高度
}
Datetime picker不能正常彈出的問題
不知道是不是只有我才遇到了這個問題，死活不發通過官方的方法顯示出來。
無奈之下查看源碼，發現只好手動控制picker的顯示了。
我們需要添加一個popup包裹起來要用的datetime picker，然后利用computed屬性通過popup的激活來為當前日期時間控件改變display屬性。
這樣就基本達到了想要的效果，實現代碼如下：
html部分：
<mt-popup v-model="activePicker" position="bottom">
<mt-datetime-picker : ref="picker" type="date" v-model="date" :start-date="new Date('2010-01-01')" @cancel="cancelPicker" @confirm="cancelPicker"></mt-datetime-picker>
</mt-popup>
js部分：
computed: {
showOrHide: function () {
if (this.activePicker) {
return 'block'
} else {
return 'none'
}
}
},
methods: {
cancelPicker () {
this.activePicker = false
}
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
