swipe组件

因为项目加载eslint的缘故也就没有像之前的项目一样引用swiper框架。
这个轮播图的组件文档实在是不敢恭维(尽管其他的文档也好不到哪里去),官方给出的参数真是少的可怜,一些方法也并没有提到。
官方的api如下图所示,你懂的:

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

  1. 轮播默认不播放
    需要将auto的值设置为0

  2. 轮播图的手动控制
    利用vueref先绑定引用的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:

继续针对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的滑动冲突处理

虽然这两个滑动一起使用的效果很蛋疼,但是如果
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
}
} 原文链接:https://segmentfault.com/a/1190000009753447

mint-ui 填坑之路的更多相关文章

  1. Android Studio 3.0正式版填坑之路

    原文:https://www.jianshu.com/p/9b25087a5d7d   Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...

  2. 微信公众号支付备忘及填坑之路-java

    一.背景 最近公司给第三方开发了一个公众号,其中最重要的功能是支付,由于是第一次开发,遇到的坑特别的多,截止我写博客时,支付已经完成,在这里我把遇到的坑记录一下(不涉及退款).不得不吐槽一下,腾讯这么 ...

  3. 基于环信SDK的IM即时通讯填坑之路(vue)

    公司最近使用第三方环信SDK的进行通信聊天,基本已完成.记录下填坑之路 1.可以通过以下方式引用 WebSDK 1.安装 npm install easemob-websdk --save 2. 先 ...

  4. .NET 跨平台框架Avalonia UI: 填坑指北(二):在Linux上跑起来了

    上一章回顾:  .NET 跨平台框架Avalonia UI: 填坑指北(一):熟悉UI操作 本篇将要阐述 包括但不仅限于Avalonia及所有Windows到Linux跨平台开发 的一些注意事项: 一 ...

  5. Mybatis-Plus的填坑之路 - Lynwood/wunian7yulian

    目录 Mybatis-Plus 我来填坑~ 目录 一.简单介绍 官方说明 : 成绩: 最新版本: 开发层面MyBatis-Plus特色 Mybatis-Plus中的Plus 二.MP的特性 三.MP框 ...

  6. 微信小程序填坑之路其一:wx.request发送与服务端接受

    一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入 ...

  7. H5嵌入原生开发小结----兼容安卓与ios的填坑之路

    一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...

  8. .NET 跨平台框架Avalonia UI: 填坑指北(一):熟悉UI操作

    Avalonia 是一个跨平台的 .NET UI 框架,支持 Windows.Linux.Mac OSX... (以及Android  IOS soon..) 本篇主要介绍Avalonia开发过程和L ...

  9. thingsboard填坑之路

    因为thingsboard都是国外的资料,国内基本没有参考资料.所以,记录下来源码安装当中,遇到的问题. thingsboard官网源码安装连接: https://thingsboard.io/doc ...

随机推荐

  1. centos 同步网络时间

    centos 同步网络时间 # yum -y install ntp ntpdate # ntpdate cn.pool.ntp.org # date

  2. git提交空文件夹和删除远程文件

    git提交空文件夹 在文件夹中创建 .gitkeep 文件,文件内容如下 # Ignore everything in this directory * # Except this file !.gi ...

  3. Oracle查询表名超过长度限制的表

    SELECT T.table_name, LENGTH(TRIM(T.table_name)) FROM user_tables t ORDER BY LENGTH(TRIM(t.table_name ...

  4. git必会必知

    1 前言 git前身是BitKeeper,但是他不是开源软件,不符合当时开源趋势,于是就会有了开源的git,git开发只用了十天时间.目前git是公司开发必不可少的一个工具,用于多人开发的分布式版本控 ...

  5. Selector#wakeup()

    看thrift源码发现selector.wakeup()方法,通常在selector.select()后线程会阻塞.使用wakeup()方法,线程会立即返回.源码分析应该是用的线程中断实现的.下面是个 ...

  6. NOI.AC NOIP模拟赛R3解题报告

    心路历程 预计得分:\(100+100+50=250\) 实际得分:\(10 +100 +50 = 160\) 三道原题,真好.T2做过,T1写了个错误思路,T3写了写50分状压dp. 整场考试实际在 ...

  7. 1-5 Sass的基本特性-运算

    [Sass运算]加法 程序中的运算是常见的一件事情,但在 CSS 中能做运算的,到目前为止仅有 calc() 函数可行.但在 Sass 中,运算只是其基本特性之一.在 Sass 中可以做各种数学计算, ...

  8. 实现绘制图形的ToolBar

    给地图添加绘制图形的ToolBar还是有必要的,比较人性化的功能.图形的样式可以自己定制,也提供了朴实的默认样式.对 dojo 不太懂,出现了许许多多问题,真是蛋疼的一天啊.令人惊喜的是 ArcGis ...

  9. C++模板详解(系转载,但是个人添加了一些内容)

    原文地址:http://www.cnblogs.com/gw811/archive/2012/10/25/2738929.html 零.概述 模板是C++支持参数化多态的工具,使用模板可以使用户为类或 ...

  10. 插入mysql语句报错:1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near

    插入一个很简单的sql语句时候,mysql一直报错: [SQL] INSERT INTO ORDER ( id, activity_id, order_type, phone, order_amoun ...