摘要:官网还不断的访问不了。在此推荐一个移动端库按需引入二次封装组件列表的下拉刷新和上拉加载更多是移动端必须的组件。不用写死高度了,并且兼容对外提供了更加简明易用的刷新,回到顶部,获得和设置滚动条位置的方法统一的提示,免去重复代码。
按需引入mint-ui
本项目用了 mint-ui 作为基础ui框架,在使用中遇到不少问题。官网doc 还不断的访问不了。不过还是很感谢 mint-ui 团队。
在此推荐一个 vue移动端ui库 vant
按需引入
* mint-ui import "mint-ui/lib/style.css" import { Navbar, TabItem, TabContainer, TabContainerItem, Radio, Actionsheet, Switch, Popup, Button, DatetimePicker, Toast, Picker, MessageBox, loadmore, Range, Progress, Indicator, } from "mint-ui" Vue.component(Navbar.name, Navbar) Vue.component(TabItem.name, TabItem) Vue.component(TabContainer.name, TabContainer) Vue.component(TabContainerItem.name, TabContainerItem) Vue.component(Radio.name, Radio) Vue.component(Actionsheet.name, Actionsheet) Vue.component(Popup.name, Popup) Vue.component(Button.name, Button) Vue.component(DatetimePicker.name, DatetimePicker) Vue.component(Picker.name, Picker); Vue.component(loadmore.name, loadmore); Vue.component(Range.name, Range); Vue.component(Progress.name, Progress); Vue.component(Switch.name, Switch);二次封装 mt-loadmore 组件
列表的下拉刷新和上拉加载更多是移动端必须的组件。但是 mt的 loadmore组件有点问题,因此 我自己包了一层,让它变得更加
明了好用了
模拟iphone 点击顶部 滚动列表到顶部。
不用写死高度了,并且兼容 iphoneX
对外提供了更加简明易用的 刷新,回到顶部,获得和设置滚动条位置的方法
统一的UI提示,免去重复css代码。
代码使用
- {{loadingText}}
mySelect 组件//列表出来函数 itemProcess(rows) { rows.forEach(item => { item.time= new Date().getTime(); }) return rows }, {{item.time}}
移动端 select 组件 实际 等于 popup.bottom + picker 两个组件组合出来的;
代码使用{{name}}
封装 popup 组件//设置选中 this.$refs["mySelect"].setTime(index);
popup 组件一般都是通过配置position 达到滑动进入或者底部出来或者中间弹窗的目的。唯一的害处是,如果你的页面有很多弹窗,你要设置很多变量 true/false 来控制弹窗隐现。所以在此我封装了一下。
减少css代码,组件配置
减少声明控制隐藏显示的变量
实现使用
xxxx //打开 this.$refs["exceptionFlow"].open(); //关闭 this.$refs["exceptionFlow"].close();
positon的值跟mint原来是一样的
mint 的时间控件使用起来也比较麻烦,也做了二次封装,主要有以下特点
直接得到时间值字符串
自动绑定了open 和 close 方法
添加了取消,保存功能
支持初始化时间,动态设置时间值
代码使用{{timeStartFmt}}
封装上传图片组件{startTime = val}">
上传图片也是常用组件,在这里自己实现了一下。
代码使用* adjunct.vue
效果
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/102455.html
摘要:背景个人背景就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习前端方向,自学,技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多,投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗,待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习 前端方向,自学,vue技术栈 时间背景 大概是在11月9日准备...
摘要:背景个人背景就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习前端方向,自学,技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多,投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗,待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习 前端方向,自学,vue技术栈 时间背景 大概是在11月9日准备...
摘要:中中我的草稿这样,定义了为的页面就会被缓存。但是移动端开发不能用树,通常就是像百度网盘那样,类型文件夹的方式交互。 项目背景 手上的 vue移动端 项目已经开发了大几个月了,遇到了一些很有意思的坑,也让自己学习了很多;写此文主要目的是记下一些我遇到的坑,以及自己的解决方案,分享的同时也方便以后复习。 项目的底层是上司通过 Cordova 等常用的 hybird app工具打包出来的。...
阅读 2526·2021-11-23 09:51
阅读 3332·2021-11-22 15:22
阅读 1849·2021-11-18 13:22
阅读 2177·2021-09-24 09:48
阅读 1282·2019-08-29 13:58
阅读 1273·2019-08-26 13:39
阅读 2394·2019-08-26 10:48
阅读 3015·2019-08-26 10:21