文档章节

mintUI之swipert填坑

o
 osc_z1hvg4cu
发布于 2018/04/24 16:31
字数 827
阅读 10
收藏 0

精选30+云产品,助力企业轻松上云!>>>

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文档里面就没有呢,藏着掖着干嘛,也希望有同样问题的同僚可以少跳坑😭😭😭😭😭😭

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
【孤独旅者】封装一个三级联动和基于Vue的mintUI三级联动

原生JS封装: moreSelect: function (url,elements) { 基于Vue的mintUI三级联动:   本联动数据地址:https://github.com/modood/Administrative-divisions-of-China   Vue中使用mint-UI......

osc_v9knegpw
2019/04/04
5
0
Mint UI教程汇总

Vue移动端框架Mint UI教程-搭建环境引入框架(一) https://www.jianshu.com/p/874e5152b3c5 Vue移动端框架Mint UI教程-底部导航栏(二) https://www.jianshu.com/p/56e887cbb660 Vue移动端...

浮.尘
01/21
0
0
MintUI引入vue项目以及引入iconfont图标

官网地址:http://mint-ui.github.io/#!/zh-cn 中文文档:http://mint-ui.github.io/docs/#/zh-cn2 示例展示:http://elemefe.github.io/mint-ui/#/ 如何引入vue2项目: 在public的index.htm......

osc_ed4c5zv7
2019/12/09
4
0
vue引入nutUI

这段时间需要做一个移动端项目,我需要选着用哪个UI库,其它的UI库没多看,看了看mintUI和nutUI,感觉mintUI的功能要比nutUI的功能少点,mintUI是饿了么团队开发的,而nutUI是京东团队开发的...

osc_cmsehuqh
2019/12/19
13
0
Vue移动组件库Mint UI的安装与使用

一、什么是 Mint UI 1、Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2、Mint UI 按需加载组件 3、Mint UI 轻量化 二、Mint UI 的安装 1、在项目根目录终端引入: npm i mint...

osc_ygiycxyf
2019/07/31
3
0

没有更多内容

加载失败,请刷新页面

加载更多

2020-07-03:有1亿个数字,其中有2个是重复的,快速找到它,时间和空间要最优

福哥答案2020-07-03: 1.双重遍历。 时间复杂度是O(N^2)。 2.排序。 采用外部排序。时间复杂度是O(NlogN)。 3.遍历加哈希存储。 空间换时间,时间复杂度是O(N),空间复杂度是O(N)。这种方法适...

osc_ix000whh
27分钟前
17
0
O2OA开源免费开发平台:在O2门户页面中使用React(三)

在前面的章节中,我们介绍了两种在O2OA中使用React开发应用的方式,已经可以满足绝大多数的情况了。如果您考虑完全脱离O2的web服务器,自己搭建web服务器,那就请阅读本章。   我们还是使用...

O2OA企业信息化平台
28分钟前
21
0
harbor 2.0 搭建docker私有仓库

harbor Harbor 是一个CNCF基金会托管的开源的可信的云原生docker registry项目,可以用于存储、签名、扫描镜像内容,Harbor 通过添加一些常用的功能如安全性、身份权限管理等来扩展 docker r...

osc_l7zl78wt
29分钟前
20
0
Java并发编程(06):Lock机制下API用法详解

本文源码:GitHub·点这里 || GitEE·点这里 一、Lock体系结构 1、基础接口简介 Lock加锁相关结构中涉及两个使用广泛的基础API:ReentrantLock类和Condition接口,基本关系如下: Lock接口 ...

osc_kiub62pt
30分钟前
27
0
DNS存在的问题

1、域名缓存问题 本地做一个缓存,直接返回缓存数据。可能会导致全局负载均衡失败,因为上次进行的缓存,不一定是这次离客户最近的地方,可能会绕远路。 2、域名转发问题 如果是A运营商将解析...

mind-blowing
31分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部