mint-ui在vue中的使用示例


Posted in Javascript onApril 05, 2018

本文介绍了mint-ui在vue中的使用示例,分享给大家,具体如下:

首先放上 mint-ui中文文档

近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码。github上面的分享,里面都是markdown文件,内容就是网上的文档

刚好自己在用,网上能找到的资料也不是很详细,自己写写咯。持续更新...emmmmm,应该可以吧,我这么懒。希望能给别人带来帮助。

介绍一下mint-ui的特性

特性介绍

  1. Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
  2. 真正意义上的按需加载组件。可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大。
  3. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验。
  4. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化。即使全部引入,压缩后的文件体积也仅有 ~30kb (JS + CSS) gzip。

这个组件库,适合于基于vue的手机页面开发。

1.cell的使用

先丢个图↓

mint-ui在vue中的使用示例

在做switch的时候,想做成文字和switch在列表的两侧。效果出不来,发现有很多人跟我一样死命的钻switch的文档,以及找switch的相关资料。然后实际上,应该用cell才对。

<mt-cell title="开关状态">
  <mt-switch v-model="openValue" @change="changeStatus"></mt-switch>
</mt-cell>

利用cell的布局,和switch相结合。产生下面的结果。

mint-ui在vue中的使用示例 

2.Infinite scroll 和 Navbar结合使用。

Navbar 是这样的↓

mint-ui在vue中的使用示例

Infinite scroll 是这样的↓

mint-ui在vue中的使用示例

两个结合起来,就是把Infinite scroll嵌套在 <mt-tab-container-item id="1"></mt-tab-container-item> 里面,然后效果就出来了。

简单的就是酱紫的。

<mt-navbar v-model="selected" >
  <mt-tab-item id="1">选项一</mt-tab-item>
  <mt-tab-item id="2">选项二</mt-tab-item>
</mt-navbar>
<mt-tab-container v-model="selected">
  <mt-tab-container-item id="1">
    <div v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        class="content"
    >
    </div>
  </mt-tab-container-item>
  <mt-tab-container-item id="2">
    <div v-infinite-scroll="loadMoreReceive"
        infinite-scroll-disabled="loadingReceive"
        infinite-scroll-distance="10"
        class="content"
    >
    </div>
  </mt-tab-container-item>
</mt-tab-container>

这样基本页面就出来了。

mint-ui在vue中的使用示例

有个小问题就是,这是一个页面,滚动条是共用的。也就是说,你在选项卡一拉出来好几页数据之后,再到选项卡二,滚动条的位置是不会变的,你的选项卡二的内容,会被拉出来好多页的数据。如果某个选项卡的数据比较少,会影响到其他选项卡的数据加载。

这个问题,找了半天,最后发现一个和简单的办法。在Infinite-Scroll里面,添加一个 v-if=selected == id ,把Infinite-scroll和选项卡的id、selected相结合,选中的selected与id对应的时候,才进行对应的Infinite-Scroll。

Infinite-Scroll的代码如下:

<div v-infinite-scroll="loadMore"
  infinite-scroll-disabled="loading"
  infinite-scroll-distance="10"
  class="content"
  v-if="selected == 1"
>

根据需要,v-if的条件进行修改。

v-infinite-scroll 所绑定的方法,会在vue的mounted之后,before之前第一次执行,不需要另外调用。

3.Picker,地址三级联动

这里有个很简洁的三级联动,之前要用的时候没找到。自己写的一个,好麻烦。先放图

mint-ui在vue中的使用示例

首先获取地址

getRegion(){
  var root=this;
  <!-- 通过/region 接口获取三级地址,然后存入regionArr -->
  http.get("/region").then(function (data) {
    root.regionArr=data.data.data;
    <!-- 存放省 -->
    for(var i=0;i<root.regionArr.length;i++){
      root.region_province[i]=root.regionArr[i].value;
    }
    <!-- 存放市 -->
    for(var i=0;i<root.regionArr[0].children.length;i++){
      root.region_city[i]=root.regionArr[0].children[i].value;
    }
    <!-- 存放区 -->
    for(var i=0;i<root.regionArr[0].children[0].children.length;i++){
      root.region_zone[i]=root.regionArr[0].children[0].children[i].value;
    }
    root.region=[
      {
        flex: 1,
        values: root.region_province,
        textAlign: 'left',
        className:'picker_Slot'

      },
      {
        divider: true,
        content: '-',
        className: 'slot2'
      },
      {
        flex: 1,
        values: root.region_city,
        textAlign: 'center',
        className:'picker_Slot'
      },
      {
        divider: true,
        content: '-',
        className: 'slot2'
      },
      {
        flex: 1,
        values: root.region_zone,
        textAlign: 'right',
        className:'picker_Slot'
      }
    ]

  });

},

然后设置三级地址

onValuesChange(picker, values) {
  var root=this;
  var str_1=[];
  var str_2=[];
  for(var i in root.regionArr){
    // 获取省,并重置市级名称
    if(root.regionArr[i].value == values[0]){
      for(var j in root.regionArr[i].children){
        str_1.push(root.regionArr[i].children[j].value);
        // 获取市级,并重置区级的名称
        if(root.regionArr[i].children[j].value == values[1]){
          // 当市级下不存在区名市,置空。
          if(root.regionArr[i].children[j].children != null){
            for(var k in root.regionArr[i].children[j].children){
              str_2.push(root.regionArr[i].children[j].children[k].value);
            }
          }else{
            str_2.push(" ");
          }
        }
      }
      picker.setSlotValues(1, str_1);
      picker.setSlotValues(2, str_2);
    }
  }

  // 赋值,初始时置为上一页返回的值
  root.$set(root.printerMessage,'province',values[0] == null ? root.printerMessage.province : values[0]);
  root.$set(root.printerMessage,'city',values[1] == null ? root.printerMessage.city : values[1]);
  root.$set(root.printerMessage,'area',values[2] == null ? root.printerMessage.area : values[2]);
}

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

Javascript 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
js实现防止被iframe的方法
Jul 03 Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 Javascript
javascript中this指向详解
Apr 23 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
微信小程序实现分享到朋友圈功能
Jul 19 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
webpack热模块替换(HMR)/热更新的方法
Apr 05 #Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 #Javascript
express默认日志组件morgan的方法
Apr 05 #Javascript
React Native悬浮按钮组件的示例代码
Apr 05 #Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 #Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 #Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 #Javascript
You might like
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
使用jQuery简单实现模拟浏览器搜索功能
2014/12/21 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
AngularJS 2.0入门权威指南
2016/10/08 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
vue单页面在微信下只能分享落地页的解决方案
2019/04/15 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
python爬虫爬取快手视频多线程下载功能
2018/02/28 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python对象与引用的介绍
2019/01/24 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
opencv+python实现均值滤波
2020/02/19 Python
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
招商经理岗位职责
2013/11/16 职场文书
业务助理岗位职责
2013/11/18 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
房屋买卖协议样本
2014/11/16 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
HttpClient实现表单提交上传文件
2022/08/14 Java/Android