vue中mint-ui的使用方法
|
mint-ui在vue中的使用，供大家参考，具体内容如下 首先放上近来在使用mint-ui，发现部分插件在讲解上并不是很详细，部分实例找不到使用的代码。github上面的分享，里面都是markdown文件，内容就是网上的文档 刚好自己在用，网上能找到的资料也不是很详细，自己写写咯。持续更新...emmmmm，应该可以吧，我这么懒。希望能给别人带来帮助。 介绍一下mint-ui的特性特性介绍
这个组件库，适合于基于vue的手机页面开发。 1.cell的使用 先丢个图↓
在做switch的时候，想做成文字和switch在列表的两侧。效果出不来，发现有很多人跟我一样死命的钻switch的文档，以及找switch的相关资料。然后实际上，应该用cell才对。 利用cell的布局，和switch相结合。产生下面的结果。
2.Infinite scroll 和 Navbar结合使用 Navbar 是这样的↓
Infinite scroll 是这样的↓
两个结合起来，就是把Infinite scroll嵌套在 简单的就是酱紫的。 这样基本页面就出来了。
有个小问题就是，这是一个页面，滚动条是共用的。也就是说，你在选项卡一拉出来好几页数据之后，再到选项卡二，滚动条的位置是不会变的，你的选项卡二的内容，会被拉出来好多页的数据。如果某个选项卡的数据比较少，会影响到其他选项卡的数据加载。 这个问题，找了半天，最后发现一个和简单的办法。在Infinite-Scroll里面，添加一个 v-if=selected == id，把Infinite-scroll和选项卡的id、selected相结合，选中的selected与id对应的时候，才进行对应的Infinite-Scroll。Infinite-Scroll的代码如下： 根据需要，v-if的条件进行修改。 v-infinite-scroll 所绑定的方法，会在vue的mounted之后，before之前第一次执行，不需要另外调用。 3.Picker，地址三级联动 这里有个很简洁的，之前要用的时候没找到。自己写的一个，好麻烦。先放图
首先获取地址
http.get("/region").then(function (data) {
root.regionArr=data.data.data;
for(var i=0;i
divider: true,content: '-',className: 'slot2' },{ flex: 1,values: root.region_city,textAlign: 'center',className:'picker_Slot' },values: root.region_zone,textAlign: 'right',className:'picker_Slot' } ] }); }, 然后设置三级地址 // 赋值，初始时置为上一页返回的值
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]); } 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
