浅谈mint-ui 填坑之路

<mt-swipe ref="swipe" class="swipe" :auto="0">
  <mt-swipe-item v-for="img in images" :key="img.id">
    <img :src="/UploadFiles/2021-04-02/img.url">

然后利用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
 }
}



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。