浅谈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 相关文章推荐
jquery中获取元素的几种方式小结
Jul 05 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
JS与HTML结合实现流程进度展示条思路详解
Sep 03 Javascript
JavaScript实现短信倒计时60s
Oct 09 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
详解vuex的简单todolist例子
Jul 14 Javascript
webpack中的模式(mode)使用详解
Feb 20 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
根德YB400的电路分析
2021/03/02 无线电
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
简单实现PHP留言板功能
2016/12/21 PHP
URL地址中的#符号使用说明
2011/02/12 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
js for循环倒序输出数组元素的实例
2017/03/01 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
2020/07/31 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
[58:09]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第三场 6.2
2018/06/03 DOTA
使用Python编写提取日志中的中文的脚本的方法
2015/04/30 Python
python中的全局变量用法分析
2015/06/09 Python
python 网络爬虫初级实现代码
2016/02/27 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
Python爬取成语接龙类网站
2018/10/19 Python
pandas通过索引进行排序的示例
2018/11/16 Python
Mac安装python3的方法步骤
2019/08/09 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
阿玛尼美妆加拿大官方商城:Giorgio Armani Beauty加拿大
2017/10/24 全球购物
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android