1、安装mint-ui框架:

cnpm  install mint-ui --save-dev

在main.js入口文件中引入并命名用mint-ui框架

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue' Vue.use(MintUI) new Vue({
el: '#app',
components: { App }
})

在app.vue组件中使用:

<template>
<div class="page-tabbar">
<div class="page-wrap">
<div class="page-title">Tabbar</div>
<div>
<mt-cell class="page-part" title="当前选中" :value="selected" />
</div> <!-- tabcontainer -->
<mt-tab-container class="page-tabbar-container" v-model="selected"> <mt-tab-container-item id="外卖">
<mt-cell v-for="n in 10" :title="'餐厅 ' + n" />
</mt-tab-container-item> <mt-tab-container-item id="订单">
<mt-cell v-for="n in 5" :title="'订单 ' + n" />
</mt-tab-container-item> <mt-tab-container-item id="发现">
<mt-cell v-for="n in 7" :title="'发现 ' + n" />
</mt-tab-container-item> <mt-tab-container-item id="我的">
<div class="page-part">
<!-- cell -->
<mt-cell v-for="n in 12" :title="'我的 ' + n" />
</div>
<router-link to="/">
<!-- button -->
<mt-button type="danger" size="large">退出</mt-button>
</router-link>
</mt-tab-container-item>
</mt-tab-container>
</div> <mt-tabbar v-model="selected">
<mt-tab-item id="外卖">
<img slot="icon" src="../assets/logo.png">
外卖
</mt-tab-item>
<mt-tab-item id="订单">
<img slot="icon" src="../assets/logo.png">
订单
</mt-tab-item>
<mt-tab-item id="发现">
<img slot="icon" src="../assets/logo.png">
发现
</mt-tab-item>
<mt-tab-item id="我的">
<img slot="icon" src="../assets/logo.png">
我的
</mt-tab-item>
</mt-tabbar>
</div>
</template> <script>
export default {
name: 'tabbar',
data() {
return {
selected: '外卖'
};
}
};
</script> <style>
.page-tabbar {
overflow: hidden;
height: 100vh;
} .page-wrap {
overflow: auto;
height: 100%;
padding-bottom: 100px;
}
</style>

  效果如下:

mint-ui框架的使用的更多相关文章

  1. vuetify,vux,Mint UI 等框架的选择

    vuetify: https://vuetifyjs.com/zh-Hans/getting-started/quick-start NutUI:https://github.com/jdf2e/nu ...

  2. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  3. 前端UI框架小汇总

    前言: 近期,小弟根据GitHub.前端社区.掘金等平台对当前流行的前端UI框架的进行了小小的整理和汇总(ps:前端UI框架的应用是通过GitHub star数,社区热度和使用范围等进行的粗略的汇总[ ...

  4. 优秀的基于VUE移动端UI框架合集

    1. vonic 一个基于 vue.js 和 ionic 样式的 UI 框架,用于快速构建移动端单页应用,很简约,是我喜欢的风格 star 2.3k 中文文档 在线预览 2.vux 基于WeUI和Vu ...

  5. 前端常用UI框架

    移动端UI框架 Mint UI(饿了么团队) 中文官网:http://mint-ui.github.io/#!/en 饿了么前端团队推出的基于Vue.js的移动端组件库 GitHub地址:https: ...

  6. vue使用桌面Element-UI和移动端MintUI的UI框架

    vue使用桌面Element-UI和移动端MintUI的UI框架 element-uiElement - 网站快速成型工具http://element-cn.eleme.io/#/zh-CN 安装:n ...

  7. 前端UI框架选择区别对比推荐

    UI选择务必慎重,货比三家. 弱水三千只取一瓢:弱水三千只取一瓢,源起佛经中的一则故事,警醒人们在一生中可能会遇到很多美好的东西,但只要用心好好把握住其中的一样就足够了 老牌构建于jQuery框架之上 ...

  8. vue UI框架

    一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动 ...

  9. 基于vue的UI框架集锦

    前端框架百花齐放.争奇斗艳,令人眼花缭乱.大神们一言不合就整一个框架出来,另小白们无所适从.下面罗列了一些比较优秀的UI框架,Star多的大都是老牌劲旅,Star少的许多是后起之秀. (1)Eleme ...

  10. 微信公众号 几种移动端UI框架介绍

    微信公众号开发,主要是移动端网页的页面开发,在这里推荐3个移动端UI框架:WeUI.SUI和Mint UI. 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计, ...

随机推荐

  1. ctci1.4

    ;     ;     ; i < len ; i++)         ;      +];     ; i < len; i++){         ';         }      ...

  2. ItemsSource数据源 或 集合属性 的定义 ——> 的数据源定义(典型)

    在Xaml中: ItemsSource="{Binding Path=GridDataSource.PoliceforceDataSource}" 在ViewModel中: Obs ...

  3. 进程上下文频繁切换导致load average过高

    一.问题现象 现网有两台虚拟机主机95%的cpu处于idle状态,内存使用率也不是特别高,而主机的load average达到了40多. 二.问题分析 先在主机上通过top.free.ps.iosta ...

  4. python:小乌龟turtle

    turtle的意思是乌龟,也是python中自带的图形函数,使用turtle的方法也很形象,就好像在画布上有一个小乌龟(在画布上是一个箭头),然后你可以让它动来动去,它经过的地方就被留下了记号. 例如 ...

  5. nodejs利用express操作mysql增删改查

    如果不知道怎么连接数据库的请看http://www.cnblogs.com/complete94/p/6714757.html 我当大家都知道怎么连接数据库了,那么 我们开始吧 var express ...

  6. Gridview 尾部添加总计

    1.GridView控件showfooter的属性=true 2. int totalZJ, iZJ; protected void GridView1_RowDataBound(object sen ...

  7. 本地如何搭建IPv6环境测试你的APP(转)

    IPv6的简介 IPv4 和 IPv6的区别就是 IP 地址前者是 .(dot)分割,后者是以 :(冒号)分割的(更多详细信息自行搜索). PS:在使用 IPv6 的热点时候,记得手机开 飞行模式 哦 ...

  8. Okhttp之CacheInterceptor简单分析

    <OkHttp之BridgeInterceptor简单分析 >简单分析了BridgeInterceptor的工作原理,在Okhttp的拦截器链上BridgeInterceptor的下一个拦 ...

  9. XOR Queries(莫队+trie)

    题目链接: XOR Queries 给出一个长度为nn的数组CC,回答mm个形式为(L, R, A, B)(L,R,A,B)的询问,含义为存在多少个不同的数组下标k \in [L, R]k∈[L,R] ...

  10. python常用模块之sys模块

    python常用模块之sys模块 1.sys.argv[]:命令行参数List,第一个元素是程序本身 # 写一个简单的python程序,代码如下: #!/usr/bin/python #coding= ...