mint-ui 填坑之路
swipe组件
因为项目加载eslint
的缘故也就没有像之前的项目一样引用swiper
框架。
这个轮播图的组件文档实在是不敢恭维(尽管其他的文档也好不到哪里去),官方给出的参数真是少的可怜,一些方法也并没有提到。
官方的api如下图所示,你懂的:
仔细的看了的这个组件的example后,会找到一些常用的方法。
轮播默认不播放
需要将auto的值设置为0轮播图的手动控制
利用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:
继续针对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 填坑之路的更多相关文章
- Android Studio 3.0正式版填坑之路
原文:https://www.jianshu.com/p/9b25087a5d7d Android Studio 3.0启动图 序言 总看别人的文章,今天尝试着自己来写一篇.在逛论坛时候,无意间发 ...
- 微信公众号支付备忘及填坑之路-java
一.背景 最近公司给第三方开发了一个公众号,其中最重要的功能是支付,由于是第一次开发,遇到的坑特别的多,截止我写博客时,支付已经完成,在这里我把遇到的坑记录一下(不涉及退款).不得不吐槽一下,腾讯这么 ...
- 基于环信SDK的IM即时通讯填坑之路(vue)
公司最近使用第三方环信SDK的进行通信聊天,基本已完成.记录下填坑之路 1.可以通过以下方式引用 WebSDK 1.安装 npm install easemob-websdk --save 2. 先 ...
- .NET 跨平台框架Avalonia UI: 填坑指北(二):在Linux上跑起来了
上一章回顾: .NET 跨平台框架Avalonia UI: 填坑指北(一):熟悉UI操作 本篇将要阐述 包括但不仅限于Avalonia及所有Windows到Linux跨平台开发 的一些注意事项: 一 ...
- Mybatis-Plus的填坑之路 - Lynwood/wunian7yulian
目录 Mybatis-Plus 我来填坑~ 目录 一.简单介绍 官方说明 : 成绩: 最新版本: 开发层面MyBatis-Plus特色 Mybatis-Plus中的Plus 二.MP的特性 三.MP框 ...
- 微信小程序填坑之路其一:wx.request发送与服务端接受
一.序言 应公司要求要求,要用小程序开发一个信息录入系统.没办法只能听话来填坑. 先介绍一下环境:客户端——小程序:服务端——java:数据库——mysql:服务器——centos7 需求:客户端输入 ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- .NET 跨平台框架Avalonia UI: 填坑指北(一):熟悉UI操作
Avalonia 是一个跨平台的 .NET UI 框架,支持 Windows.Linux.Mac OSX... (以及Android IOS soon..) 本篇主要介绍Avalonia开发过程和L ...
- thingsboard填坑之路
因为thingsboard都是国外的资料,国内基本没有参考资料.所以,记录下来源码安装当中,遇到的问题. thingsboard官网源码安装连接: https://thingsboard.io/doc ...
随机推荐
- 在 Azure WebApps 中运行64位 Asp.net Core 应用
作为微软下一代的开源的跨平台的开发框架, Asp.net core 正在吸引越来越多的开发者基于其构建现代 web 应用. 目前, Azure App Service 也实现了对 asp.net co ...
- AngularJS 指令 实现文本水平滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- spring_boot 配置
配置pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www ...
- Servlet开发(一)
1. Servlet简介 Servlet是服务器端程序,主要用来交互式地浏览和修改数据,生成动态web内容.Servlet是SUN公司提供的一个接口,广义的Servlet可以指任何实现了Servlet ...
- JavaScript之parseInt()数值转换常被忽略的问题
使用parseInt()你可以从字符串中获取数值,该方法接受另一个基数参数,这经常省略,但不应该.当字符串以”0″开头的时候就有可能会出问题,例如,部分时间进入表单域,在ECMAScript 3中,开 ...
- tapable事件流插件
tapable Webpack本质上是一种事件流的机制,它的工作流程就是将各个插件串联起来,而实现这一切的核心就是Tapable,webpack中最核心的负责编译的Compiler和负责创建bundl ...
- FLASK实现上传下载功能
#!-*-coding=utf-8-*- # from flask import Flask # # app = Flask(__name__) # # # @app.route('/') # def ...
- css-布局定位
position: ** 属性值 - absolute: *** 将对象从文档流中拖出 *** 可以是top.bottom等属性进行定位 - relative: *** 不会将对象从文档流中拖出 * ...
- var a =10 与 a = 10的区别
学习文章------汤姆大叔-变量对象 总结笔记 变量特点: ①变量声明可以存储在变量对象中.②变量不能直接用delete删除. var a =10 与 a = 10的区别: ①a = 10只是为全局 ...
- Hadoop序列化程序报错
这个错误指向序列化类,注意实现的Read和Wirte顺序一定要一致,并且要使用基本类型,不要使用包装类. java.lang.Exception: java.io.EOFException at or ...