点单微信小程序开_浅谈mint

发布时间:2021-01-11 13:12 作者:jianzhan

摘要: 探讨mint-ui 填坑之途 最近入门vue的手机端新项目,放弃了以前自身相对性了解的mui架构,改成用饿了么外卖精英团队以便vue量身定做订制的mint-ui架构。以前开发设计的情况下感觉

浅谈mint-ui 填坑之路       本篇文章主要介绍了浅谈mint-ui 填坑之路,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

swipe组件

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

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

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

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

1、轮播默认不播放

需要将auto的值设置为0

2、轮播图的手动控制

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

 mt-swipe ref="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 puted属性通过popup的激活来为当前日期时间控件改变display属性。

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

html部分:

 mt-popup v-model="activePicker" position="bottom" 
 mt-datetime-picker : ref="picker" type="date" v-model="date" :start-date="new Date('')" @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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


  • 淘宝网京东商城店,和建

    模拟题目:淘宝网网京东商城商城系统店,和修建商城系统系统软件手机微信微信小程序app到底有什么区别? 各位老板注意啦,电子器件商务接待下面场早就一开始了,短视频电子器件

  • 干货知识贴|三百万粉絲

    原题目:干货知识贴|三百万粉絲的密秘:深层分析全国性较大的网上抽奖活动服务平台 一个(相对性)详细的抽奖活动主题活动,都必须考虑到什么物品? 最先另附文章内容总体考

  • 腾迅Q4财务报告话题 微信

    肺部感染肺炎疫情期限内,传统式式经济发展发展趋势方法遭到冲击性性,“无碰触”经济发展发展趋势作为替代方法面世,催产了各种各样各种各样各种各样各种各样的新生儿儿活样

  • 小区团购价微信小程序,

    在目前极速发展趋势发展趋势的互连网阶段。大伙儿可以足不出户,就可以尽知乾坤事;足不出户,就可以购买商品。以手机上手机微信为寓意着的app也是占据了重要市场销售销售市场

  • 美团外卖买水果武汉市通

    8月10日,美团外卖买水果宣布登录武汉市,第一批给出10个站点,遮盖武汉市市汉阳区好几个小区。先前,美团外卖买水果已北京、上海市发布,为二地住户出示手机上买水果的便民利