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