资讯专栏INFORMATION COLUMN

记 vue 移动端开发 中的经验(2)

Flands / 1989人阅读

摘要:官网还不断的访问不了。在此推荐一个移动端库按需引入二次封装组件列表的下拉刷新和上拉加载更多是移动端必须的组件。不用写死高度了,并且兼容对外提供了更加简明易用的刷新,回到顶部,获得和设置滚动条位置的方法统一的提示,免去重复代码。

按需引入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代码。

代码



使用

  
  • {{item.time}}
  • //列表出来函数 itemProcess(rows) { rows.forEach(item => { item.time= new Date().getTime(); }) return rows },
    mySelect 组件

    移动端 select 组件 实际 等于 popup.bottom + picker 两个组件组合出来的;

    代码
    
    
    
    
    使用
    
    
    
    //设置选中
     this.$refs["mySelect"].setTime(index);
    封装 popup 组件

    popup 组件一般都是通过配置position 达到滑动进入或者底部出来或者中间弹窗的目的。唯一的害处是,如果你的页面有很多弹窗,你要设置很多变量 true/false 来控制弹窗隐现。所以在此我封装了一下。

    减少css代码,组件配置

    减少声明控制隐藏显示的变量

    实现
    
    
    
    
    
    
    
    使用
    
          xxxx
    
    
    //打开 
    this.$refs["exceptionFlow"].open();
    
    //关闭
    this.$refs["exceptionFlow"].close();
    

    positon的值跟mint原来是一样的

    时间控件封装

    mint 的时间控件使用起来也比较麻烦,也做了二次封装,主要有以下特点

    直接得到时间值字符串

    自动绑定了open 和 close 方法

    添加了取消,保存功能

    支持初始化时间,动态设置时间值

    代码
    
    
    
    
    
    使用
     
    
    封装上传图片组件

    上传图片也是常用组件,在这里自己实现了一下。

    代码
    
    
    
    
    
    
    *  adjunct.vue
    
    
    
    
    
    使用
    
            
            
    
    效果

    文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

    转载请注明本文地址:https://www.ucloud.cn/yun/102455.html

    相关文章

    • 2018.11.19秋招末第二波前实习/校招小结

      摘要:背景个人背景就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习前端方向,自学,技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多,投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗,待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习 前端方向,自学,vue技术栈 时间背景 大概是在11月9日准备...

      suxier 评论0 收藏0
    • 2018.11.19秋招末第二波前实习/校招小结

      摘要:背景个人背景就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习前端方向,自学,技术栈时间背景大概是在月日准备好简历开始投递秋招差不多已经结束招聘岗位不多,投递对象为大一些的互联网公司事件背景第一个入职的是好未来的前端实习岗,待遇工 背景 个人背景 就读于东北某普通二本院校计算机软件工程专业,现大四,北京实习 前端方向,自学,vue技术栈 时间背景 大概是在11月9日准备...

      canger 评论0 收藏0
    • vue 移动开发 中的经验

      摘要:中中我的草稿这样,定义了为的页面就会被缓存。但是移动端开发不能用树,通常就是像百度网盘那样,类型文件夹的方式交互。 项目背景 手上的 vue移动端 项目已经开发了大几个月了,遇到了一些很有意思的坑,也让自己学习了很多;写此文主要目的是记下一些我遇到的坑,以及自己的解决方案,分享的同时也方便以后复习。 项目的底层是上司通过 Cordova 等常用的 hybird app工具打包出来的。...

      shuibo 评论0 收藏0

    发表评论

    0条评论

    Flands

    |高级讲师

    TA的文章

    阅读更多
    最新活动
    阅读需要支付1元查看
    <