vue中mint-ui的使用方法


Posted in Javascript onApril 04, 2018

mint-ui在vue中的使用,供大家参考,具体内容如下

首先放上mint-ui中文文档

近来在使用mint-ui,发现部分插件在讲解上并不是很详细,部分实例找不到使用的代码。github上面的分享,里面都是markdown文件,内容就是网上的文档
刚好自己在用,网上能找到的资料也不是很详细,自己写写咯。持续更新...emmmmm,应该可以吧,我这么懒。希望能给别人带来帮助。

介绍一下mint-ui的特性

特性介绍

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

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

1.cell的使用

先丢个图↓

vue中mint-ui的使用方法

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

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

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

vue中mint-ui的使用方法

2.Infinite scroll 和 Navbar结合使用

Navbar 是这样的↓

vue中mint-ui的使用方法

Infinite scroll 是这样的↓

vue中mint-ui的使用方法

两个结合起来,就是把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>

这样基本页面就出来了。

vue中mint-ui的使用方法

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

这个问题,找了半天,最后发现一个和简单的办法。在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,地址三级联动

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

vue中mint-ui的使用方法

首先获取地址

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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
使用JS读秒使用示例
Sep 21 Javascript
js charAt的使用示例
Feb 18 Javascript
javascript 获取元素样式必杀技
May 04 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
jQuery中next方法用法实例
Apr 24 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
Vue实现PC端靠边悬浮球的代码
May 09 Javascript
JavaScript实现登录窗体
Jun 22 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 #Javascript
JS实现DOM删除节点操作示例
Apr 04 #Javascript
JS实现的DOM插入节点操作示例
Apr 04 #Javascript
AngularJS 应用模块化的使用
Apr 04 #Javascript
vue todo-list组件发布到npm上的方法
Apr 04 #Javascript
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 #Javascript
vue.js实现点击后动态添加class及删除同级class的实现代码
Apr 04 #Javascript
You might like
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
jQuery 位置插件
2008/12/25 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
2019/05/31 jQuery
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
将python代码和注释分离的方法
2018/04/21 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
通过selenium抓取某东的TT购买记录并分析趋势过程解析
2019/08/15 Python
如何在python中写hive脚本
2019/11/08 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
物业电工岗位职责
2013/11/20 职场文书
邮政员工辞职信
2014/01/16 职场文书
升学宴主持词
2014/04/02 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
建设幸福中国演讲稿
2014/09/11 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
小学教师教育随笔
2015/08/14 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Nginx本地目录映射实现代码实例
2021/03/31 Servers