腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

淺談mint-ui 填坑之路

更新時間：2017年11月06日 14:13:40 作者：Fiend

本篇文章主要介紹了淺談mint-ui 填坑之路，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

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

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

針對一些自己遇到的問題，特此記錄成文檔，方便日后使用。

swipe組件

因為項目加載eslint的緣故也就沒有像之前的項目一樣引用swiper框架。

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

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

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

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

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

2、輪播圖的手動控制

利用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)到前一張輪播圖

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

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

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

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組件也是有很多問題。話不多話，先上官方api：

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

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

因為按照其demo之中的初始化數(shù)據(jù)方法，必須使用數(shù)組中的索引值做初始化處理。針對一級菜單做defaultIndex處理是沒有問題，但是二級的話我們還需要將values值指向當(dāng)前二級數(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之中單獨為addressSlots做數(shù)據(jù)處理，我們可以統(tǒng)一將一級和二級都指向默認(rèn)的第一個參數(shù)，然后利用下面的方法做初始化處理：

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

bug處理

Infinite scroll組件的加載多次問題

官方例子的方法在一次滾動后并不止加載一次，應(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的滑動沖突處理

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

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

Datetime picker不能正常彈出的問題

不知道是不是只有我才遇到了這個問題，死活不發(fā)通過官方的方法顯示出來。

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

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

這樣就基本達(dá)到了想要的效果，實現(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
 }
}

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

您可能感興趣的文章: