近期上手vue的移動(dòng)端項(xiàng)目，舍棄了之前自己相對(duì)熟悉的mui框架，改為用餓了么團(tuán)隊(duì)為了vue量身定做的mint-ui框架。

之前開(kāi)發(fā)的時(shí)候覺(jué)得mui的文檔就足夠坑爹了，但當(dāng)我開(kāi)始閱讀mint-ui這個(gè)文檔后才發(fā)現(xiàn)自己真是太年輕了...

針對(duì)一些自己遇到的問(wèn)題，特此記錄成文檔，方便日后使用。

swipe組件

因?yàn)轫?xiàng)目加載eslint的緣故也就沒(méi)有像之前的項(xiàng)目一樣引用swiper框架。

這個(gè)輪播圖的組件文檔實(shí)在是不敢恭維（盡管其他的文檔也好不到哪里去），官方給出的參數(shù)真是少的可憐，一些方法也并沒(méi)有提到。

官方的api如下圖所示，你懂的：

仔細(xì)的看了的這個(gè)組件的example后，會(huì)找到一些常用的方法。

1、輪播默認(rèn)不播放

需要將auto的值設(shè)置為0

2、輪播圖的手動(dòng)控制

利用vue的ref先綁定引用的swipe根標(biāo)簽。

<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組件，我們就可以調(diào)用到其內(nèi)部的一些控制方法：

this.$refs.swipe.next() // 轉(zhuǎn)到下一張輪播圖
this.$refs.swipe.prev() // 轉(zhuǎn)到前一張輪播圖

接下來(lái)恐怕就是我找到的最重要的方法：監(jiān)控當(dāng)前輪播圖激活的索引值

swipe組件的當(dāng)前索引值被保存在了index之中

我們就可以利用剛才的方法，先在vue每次更新dom的時(shí)候?qū)?dāng)前激活的索引值保存起來(lái)：

beforeUpdate () {
 this.activeIndex = this.$refs.swipe.index
}

然后利用watch方法監(jiān)控當(dāng)前swipe的激活索引值就可以進(jìn)行進(jìn)行后續(xù)的處理了。

watch: {
 activeIndex: function (val, oldVal) {
  console.log('newIndex: %s, oldIndex: %s', val, oldVal)
  // TODO
 }
}

這樣swipe組件的一些基本操作總算是填坑完畢了。

picker組件

picker組件也是有很多問(wèn)題。話不多話，先上官方api：

繼續(xù)針對(duì)slots對(duì)象數(shù)組的字段說(shuō)明：

在使用過(guò)程之中我們會(huì)發(fā)現(xiàn)如果直接初始化級(jí)聯(lián)picker中的二級(jí)初始值會(huì)有問(wèn)題。

因?yàn)榘凑掌鋎emo之中的初始化數(shù)據(jù)方法，必須使用數(shù)組中的索引值做初始化處理。針對(duì)一級(jí)菜單做defaultIndex處理是沒(méi)有問(wèn)題，但是二級(jí)的話我們還需要將values值指向當(dāng)前二級(jí)數(shù)組之中去。

addressSlots: [
 {
  flex: 1,
  values: Object.keys(address),
  className: 'slot1',
  textAlign: 'center'
 }, {
  divider: true,
  content: '-',
  className: 'slot2'
 }, {
  flex: 1,
  values: ['北京'],
  className: 'slot3',
  textAlign: 'center'
 }
]

避免在created之中單獨(dú)為addressSlots做數(shù)據(jù)處理，我們可以統(tǒng)一將一級(jí)和二級(jí)都指向默認(rèn)的第一個(gè)參數(shù)，然后利用下面的方法做初始化處理：

 mounted () {
 this.$nextTick(() => {
  setTimeout(() => {
   // 利用索引初始化默認(rèn)選中的省份和城市
   this.areaSlots[0].defaultIndex = provinceIndex // Number類型
   this.areaSlots[2].defaultIndex = cityIndex
  }, 20)
 })
}

bug處理

Infinite scroll組件的加載多次問(wèn)題

官方例子的方法在一次滾動(dòng)后并不止加載一次，應(yīng)該在loading之中屏蔽新的加載處理：

loadMore () {
 this.loading = true
 setTimeout(() => {
  // TODO
  this.loading = false
 }, 2500)
}

進(jìn)行改進(jìn)：

loadMore () {
 // 防止多次加載
 if (this.loading) {
  return false
 }
 this.loading = true
 setTimeout(() => {
  // TODO
  this.loading = false
 }, 2500)
}

tabContainer和loadMore的滑動(dòng)沖突處理

雖然這兩個(gè)滑動(dòng)一起使用的效果很蛋疼，但是如果tabContainer的高度值不能撐滿整個(gè)屏幕的話，是無(wú)法在上下拉刷新的同時(shí)左右滑動(dòng)的需要使用css進(jìn)行高度處理才可以進(jìn)行左右滑動(dòng)：

.mint-tab-container-wrap{
 min-height: 617px; // 需要設(shè)置最小高度
}

Datetime picker不能正常彈出的問(wèn)題

不知道是不是只有我才遇到了這個(gè)問(wèn)題，死活不發(fā)通過(guò)官方的方法顯示出來(lái)。

無(wú)奈之下查看源碼，發(fā)現(xiàn)只好手動(dòng)控制picker的顯示了。

我們需要添加一個(gè)popup包裹起來(lái)要用的datetime picker，然后利用computed屬性通過(guò)popup的激活來(lái)為當(dāng)前日期時(shí)間控件改變display屬性。

這樣就基本達(dá)到了想要的效果，實(shí)現(xiàn)代碼如下：

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
 }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。