浅谈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 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
JS面向对象编程详解
Mar 06 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
setTimeout函数的神奇使用
Feb 26 Javascript
为你的微信小程序体积瘦身详解
May 20 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
js里面的变量范围分享
Jul 18 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
php创建类并调用的实例方法
2019/09/25 PHP
javascript 支持链式调用的异步调用框架Async.Operation
2009/08/04 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
2011/09/05 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
2016/10/16 Javascript
Vue.js组件tree实现省市多级联动
2016/12/02 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
js提取中文拼音首字母的封装工具类
2018/03/12 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
Python实现一个简单的MySQL类
2015/01/07 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
python 实现IP子网计算
2021/02/18 Python
外语系毕业生自荐信范文
2013/12/16 职场文书
高中体育教学反思
2014/01/24 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
义和团口号
2014/06/17 职场文书
企业挂职心得体会
2014/09/10 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
中秋联欢会主持词
2015/07/04 职场文书
《海上日出》教学反思
2016/02/23 职场文书
MySQL创建管理子分区
2022/04/13 MySQL