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 相关文章推荐
JS的千分位算法实现思路
Jul 31 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery的ready方法详解
Nov 27 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
H5用户注册表单页 注册模态框!
Sep 17 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
jQuery选择器之基本过滤选择器用法实例分析
Feb 19 jQuery
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
uni-app 微信小程序授权登录的实现步骤
Feb 18 Javascript
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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
阿望教你用vue写扫雷小游戏
2020/01/20 Javascript
[05:28]刀塔密之一:团结则存
2014/07/03 DOTA
Python通过select实现异步IO的方法
2015/06/04 Python
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
python 字典套字典或列表的示例
2019/12/16 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
体育专业个人的求职信范文
2013/09/21 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
自主招生自荐信
2013/12/08 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
详解MySql中InnoDB存储引擎中的各种锁
2022/02/12 MySQL
python使用opencv对图像添加噪声(高斯/椒盐/泊松/斑点)
2022/04/06 Python
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript