mintUI之swipert填坑

2018/04/24 16:31
阅读数 184

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

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

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

 1 <mt-swipe v-else-if="step === 1" :auto="0" :continuous="false" :showIndicators="false" :prevent="true" :speed="0" ref="swipe">
 2     <mt-swipe-item :key="item" v-for="item in animateIndex">
 3         <subject-tem
 4              :subject="subjectsCon"
 5              :askwrap='askWrap'
 6              :select="select" 
 7              :postAsk="postAsk" 
 8              :current="item"  
 9              :changeCurrent="changeCurrent"
10           >
11       </subject-tem>
12     </mt-swipe-item>   
13 </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,doOnTouchMovedoOnTouchStart这就是触摸事件,那就重新定义覆盖它们
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文档里面就没有呢,藏着掖着干嘛,也希望有同样问题的同僚可以少跳坑😭😭😭😭😭😭

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部