浅谈mint-ui 填坑之路


Posted in Javascript onNovember 06, 2017

近期上手vue的移动端项目,舍弃了之前自己相对熟悉的mui框架,改为用饿了么团队为了vue量身定做的mint-ui框架。

之前开发的时候觉得mui的文档就足够坑爹了,但当我开始阅读mint-ui这个文档后才发现自己真是太年轻了...

针对一些自己遇到的问题,特此记录成文档,方便日后使用。

swipe组件

因为项目加载eslint的缘故也就没有像之前的项目一样引用swiper框架。

这个轮播图的组件文档实在是不敢恭维(尽管其他的文档也好不到哪里去),官方给出的参数真是少的可怜,一些方法也并没有提到。

官方的api如下图所示,你懂的:

浅谈mint-ui 填坑之路

仔细的看了的这个组件的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:

浅谈mint-ui 填坑之路

继续针对slots对象数组的字段说明:

浅谈mint-ui 填坑之路

在使用过程之中我们会发现如果直接初始化级联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
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
Jan 11 Javascript
JavaScript 语法集锦 脚本之家基础推荐
Nov 15 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
Apr 16 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 Javascript
基于vue实现分页效果
Nov 06 #Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
Nov 06 #Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 #Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 #Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 #Javascript
Bootstrap 树控件使用经验分享(图文解说)
Nov 06 #Javascript
vue复合组件实现注册表单功能
Nov 06 #Javascript
You might like
解析php中获取url与物理路径的总结
2013/06/21 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
PHP使用redis消息队列发布微博的方法示例
2017/06/22 PHP
使用jquery 简单实现下拉菜单
2015/01/14 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
微信小程序sessionid不一致问题解决
2019/08/30 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python中使用PyQt把网页转换成PDF操作代码实例
2015/04/23 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python requests库用法实例详解
2018/08/14 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
Python多线程多进程实例对比解析
2020/03/12 Python
python 绘制国旗的示例
2020/09/27 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
铁路个人事迹材料
2014/01/30 职场文书
《美丽的黄昏》教学反思
2014/02/28 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
美容院员工规章制度
2015/08/05 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python
Python合并多张图片成PDF
2021/06/09 Python