浅谈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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
JS获取地址栏参数的几种方法小结
Feb 28 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
javascript常用方法总结
May 14 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 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设计模式 Singleton(单例模式)
2011/06/26 PHP
phalcon框架使用指南
2016/02/23 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
PHP数据对象映射模式实例分析
2019/03/29 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
微信小程序单选框自定义赋值
2020/05/26 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
python进阶教程之词典、字典、dict
2014/08/29 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
党支部鉴定意见
2015/06/02 职场文书
党员反邪教心得体会
2016/01/15 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
800字作文之大雪
2019/12/04 职场文书
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python