mint-ui 填坑之路

近期上手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 :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
  }
}

ps：若有錯誤，歡迎你們批評指正