浅谈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 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
实现div内部滚动条滚动到底部和顶部的代码
Nov 15 Javascript
vue实现简单loading进度条
Jun 06 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
ES6中异步对象Promise用法详解
Jul 31 Javascript
js实现百度淘宝搜索功能
Feb 17 Javascript
js实现三角形粒子运动
Sep 22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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 Session会话超时时间设置方法
2014/06/10 PHP
php修改文件上传限制方法汇总
2015/04/07 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
Nodejs获取网络数据并生成Excel表格
2020/03/31 NodeJs
jQuery实现查找链接文字替换属性的方法
2016/06/27 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
使用python 获取进程pid号的方法
2014/03/10 Python
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
Python内置函数dir详解
2015/04/14 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Python连接字符串过程详解
2020/01/06 Python
pytorch-RNN进行回归曲线预测方式
2020/01/14 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
怎样让char类型的东西转换成int类型
2013/12/09 面试题
优秀学生评语大全
2014/04/25 职场文书
责任心演讲稿
2014/05/14 职场文书
环保倡议书400字
2014/05/15 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
运动员入场词
2015/07/18 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android