mintUI之swipert填坑

mintUI确实是一个短小精悍的UI库，和Vue配合是很丝滑，不过文档实在是简单了，案例简单就算了，暴露的api也是少的可怜（吐槽完毕！！）

公司业务有个需求要求如下图：这种做题时可以左右切换，但是不能手势滑动切换，必须点完选项才能下一题，点击上一题按钮才能回到上一题

首先想到自己用vue的<transition ></transition >后来发现并没有那么简单，就一个切换动画要大刀阔斧改代码不合适，后来想想不如用swiper(轮播图插件，不过这次只是轮播题目罢了😏😏😏😏）

<mt-swipe v-else-if="step === 1" :auto="0" :continuous="false" :showIndicators="false" :prevent="true" :speed="0" ref="swipe">
    <mt-swipe-item :key="item" v-for="item in animateIndex">
        <subject-tem
             :subject="subjectsCon"
             :askwrap='askWrap'
             :select="select" 
             :postAsk="postAsk" 
             :current="item"  
             :changeCurrent="changeCurrent"
          >
      </subject-tem>
    </mt-swipe-item>   
</mt-swipe>

mt-swipe与mt-swipe-item是轮播组件，subject-tem是题目组件，开始实现
　　①swiper组件是有Indicators点的，我用不着那就看文档呗！发现showIndicators设为false就好了
　　②swiper组件默认是循环播放的，也就是continuous设为false，auto设为false阻止自动循环切换
附上mintUI--swiper的API:
　　

参数	说明	类型	可选值	默认值
speed	动画持时（毫秒）	Number		300
auto	自动播放的时间间隔（毫秒）	Number		3000
defaultIndex	初始显示的轮播图的索引	Number		0
continuous	是否可以循环播放	Boolean		true
showIndicators	是否显示 indicators	Boolean		true
prevent	是否在 touchstart 事件触发时阻止事件的默认行为。设为 true 可提高运行在低版本安卓浏览器时的性能	Boolean		false
stopPropagation	是否在 touchstart 事件触发时阻止冒泡。	Boolean		false

但是问题开始来了：发现默认有手势touch事件，能够左右滑动切换，这不是我要的！！！发现没有API可以阻止滑动，那只看看源码吧！发现 doOnTouchEnd，doOnTouchMove，doOnTouchStart这就是触摸事件，那就重新定义覆盖它们

 this.$nextTick(function() { this.$refs.swipe.doOnTouchStart=function(){}
    this.$refs.swipe.doOnTouchMove=function(){}
    this.$refs.swipe.doOnTouchEnd=function(){}
                  
 })

结果是阻止切换了，可是bug来了，

虽然不影响使用，不过每次切换题目都警告了，那循着这个报错发现是源码的translate报错，接着各种断点调试发现不知道什么时候出发了一次没有传数据，后来仔细想想会不会是我覆盖源码的问题，后来果不其然，就是点击题目答题的时候触发了doOnTouchStart,这就尴尬了，说明覆盖源码技术不到家。                   

 

这不就有个现成的属性noDrag吗，如果为true不久return了吗？

把

this.$refs.swipe.doOnTouchStart=function(){}

this.$refs.swipe.doOnTouchMove=function(){}

this.$refs.swipe.doOnTouchEnd=function(){}

改成

this.$refs.swipe.noDrag = true就okl了

 

 

那就是点击切换上下题了，可是又尴尬了，又没有暴露手动触发上下题的方法，又得看源码，发现有

next: function next() {
　　this.doAnimate('next');
},

prev: function prev() {
　　this.doAnimate('prev');
},

So,有了有了

　　this.$refs.swipe.doAnimate('prev'); //或者 this.$refs.swipe.prev()

写这篇文章就是想记录点代码生活，顺便吐槽吐槽mintUI为啥这些东西写都写了，也写了接收的props为啥api文档里面就没有呢，藏着掖着干嘛，也希望有同样问题的同僚可以少跳坑😭😭😭😭😭😭