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 :style="{ display: showOrHide }" 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 } }原文連接：https://segmentfault.com/a/1190000009753447