菜单

填坑之路_javascript技巧_脚本之家【澳门太阳娱乐手机登录】

2020年3月25日 - 澳门太阳娱乐手机登录

前些天上手vue的移位端项目,抛弃了事情发生早前自个儿相对熟知的mui框架,改为用饿了么团队为了vue量身定做的mint-ui框架。

前边开辟的时候认为mui的文档就够用坑爹了,但当自家起来读书mint-ui那些文书档案后才开掘自身真是太年轻了…

本着有些温馨碰到的标题,特此记录成文书档案,方便日后接受。

swipe组件

因为项目加载eslint的因由也就从不像以前的系列雷同援引swiper框架。

以此轮播图的构件文书档案实在是不敢恭维,官方给出的参数真是少的卓绝,一些主意也并未提到。

官方的api如下图所示,你懂的:

有心人的看了的那么些组件的example后,会找到一些常用的法子。

亟需将auto的值设置为0

选用vue的ref先绑定援用的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  { console.log('newIndex: %s, oldIndex: %s', val, oldVal) // TODO }}

这么swipe组件的一部分基本操作总算是填坑实现了。

picker组件

picker组件也可能有多数难点。话非常少话,先上官方api:

声势浩大指向slots对象数组的字段表达:

在选拔进度里面咱们会发觉只要直接开首化级联picker中的二级开始值会极度。

因为依照其demo之中的起头化数据方式,必得使用数组中的索引值做开始化管理。针对超级菜单做defaultIndex处理是未曾难点,不过二级的话我们还索要将values值指向当前二级数组之中去。

addressSlots: [ { flex: 1, values: Object.keys, className: 'slot1', textAlign: 'center' }, { divider: true, content: '-', className: 'slot2' }, { flex: 1, values: ['北京'], className: 'slot3', textAlign: 'center' }]

防止在created之中单独为addressSlots做多少管理,我们得以统一将一流和二级都指向暗中认可的首先个参数,然后利用下边的章程做开端化管理:

 mounted  => { 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  { 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属性。

这么就基本达成了想要的功用,实今世码如下:

computed: { showOrHide: function () { if  { return 'block' } else { return 'none' } }},methods: { cancelPicker () { this.activePicker = false }}

上述便是本文的全体内容,希望对我们的读书抱有利于,也可望咱们多多指教脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图