浅谈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 控制弹出窗口
Apr 10 Javascript
『jQuery』.html(),.text()和.val()的概述及使用
Apr 22 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
Oct 28 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
laypage.js分页插件使用方法详解
Jul 27 Javascript
Vue.js组件props数据验证实现详解
Oct 19 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 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执行速度全攻略(上)
2006/10/09 PHP
phpwind中的数据库操作类
2007/01/02 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
一个漂亮的php验证码类(分享)
2013/08/06 PHP
php获取apk包信息的方法
2014/08/15 PHP
js实现简单登录功能的实例代码
2013/11/09 Javascript
js根据日期判断星座的示例代码
2014/01/23 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
基于js与flash实现的网站flv视频播放插件代码
2014/10/14 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
2015/12/29 Javascript
利用jquery制作滚动到指定位置触发动画
2016/03/26 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
js 博客内容进度插件详解
2017/02/19 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
cmd运行python文件时对结果进行保存的方法
2018/05/16 Python
python实现最长公共子序列
2018/05/22 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
Python使用re模块验证危险字符
2020/05/21 Python
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
小学生演讲稿
2014/01/12 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
企业精神口号
2014/06/11 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
离婚协议书格式
2014/11/21 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
上诉答辩状范文
2015/05/22 职场文书
Python中for后接else的语法使用
2021/05/18 Python
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电