浅谈mint

浅谈mint

近期上手vue的移动端项目，舍弃了之前自己相对熟悉的mui框架，改为用饿了么团队为了vue量身定做的mint-ui框架。

之前开发的时候觉得mui的文档就足够坑爹了，但当我开始阅读mint-ui这个文档后才发现自己真是太年轻了...

针对一些自己遇到的问题，特此记录成文档，方便日后使用。

swipe组件

因为项目加载eslint的缘故也就没有像之前的项目一样引用swiper框架。

这个轮播图的组件文档实在是不敢恭维（尽管其他的文档也好不到哪里去），官方给出的参数真是少的可怜，一些方法也并没有提到。

官方的api如下图所示，你懂的：

仔细的看了的这个组件的example后，会找到一些常用的方法。

1、轮播默认不播放

需要将auto的值设置为0

2、轮播图的手动控制

利用vue的ref先绑定引用的swipe根标签。

然后利用ref绑定的swipe组件，我们就可以调用到其内部的一些控制方法：

this.$refs.swipe.next() // 转到下一张轮播图

this.$http://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组件也是有很多问题。话不多话，先上官http://方api：

继续针对slots对象数组的字段说明：

在使用过程之中我们会发现如果直接初始化级联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的滑动冲突处理

虽然这两个滑动一起使用的效http://果很蛋疼，但是如果tabContainer的高度值不能撑满整个屏幕的话，是无法在上下拉刷新的同时左右滑动的需要使用css进行高度处理才可以进行左右滑动：

.mint-tab-container-wrap{

min-height: 617px; // 需要设置最小高度

}

Datetime picker不能正常弹出的问题

不知道是不是只有我才遇到了这个问题，死活不发通过官方的方法显示出来。

无奈之下查看源码，发现只好手动控制picker的显示了。

我们需要添加一个popup包裹起来要用的datetime picker，然后利用computed属性通过popup的激活来为当前日期时间控件改变display属性。

这样就基本达到了想要的效果，实现代码如下：

html部分：

js部分：

computed: {

showOrHide: function () {

if (this.activePicker) {

return 'block'

} else {

return 'none'

}

}

},

methods: {

cancelPicker () {

this.activePicker = false

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。