mint-ui之tabbar使用
<template>
<div>
<!-- tabcontainer -->
<mt-tab-container class="page-tabbar-container" v-model="selected">
<mt-tab-container-item id="tab1">
tab1
</mt-tab-container-item>
<mt-tab-container-item id="tab2">
tab2
</mt-tab-container-item>
<mt-tab-container-item id="tab3">
tab3
</mt-tab-container-item>
<mt-tab-container-item id="tab4">
tab4
</mt-tab-container-item>
</mt-tab-container> <mt-tabbar v-model="selected" fixed>
<mt-tab-item id="tab1">
<img slot="icon" src="../assets/logo.png"> 外卖
</mt-tab-item>
<mt-tab-item id="tab2">
<img slot="icon" src="../assets/logo.png"> 订单
</mt-tab-item>
<mt-tab-item id="tab3">
<img slot="icon" src="../assets/logo.png"> 发现
</mt-tab-item>
<mt-tab-item id="tab4">
<img slot="icon" src="../assets/logo.png"> 我的
</mt-tab-item>
</mt-tabbar>
</div>
</template> <script>
export default {
data() {
return {
selected: 'tab1'
};
}
};
</script>

mint-ui之tabbar使用的更多相关文章
- mint ui的tabBar监听路由变化实现tabBar切换
说明 最近学习vue,使用了mint ui的tabBar,感觉好难受,结合 tab-container使用更难受,因为它不是根据路由来切换页面的.mui与它基本相反,因此它能根据搜索栏的路由变化,相应 ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- vue mint UI
vue 与mint UI 结合开发手机app html5页面 api 文档 http://mint-ui.github.io/#!/zh-cn
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
- 新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目(详细文章请戳用Vue创建一个新的项目). 该项目如果需要组件等都需要自己去写,今天就学习一下如何新建一个基于vue.js+Mint UI的项目,直接 ...
- iView webapp / Mint UI / MUI [前端UI]
前端UI iView webapp一套高质量的 微信小程序 UI 组件库 https://weapp.iviewui.com/?from=iview Mint UI 基于 Vue.js 的移动端组件库 ...
- Mint UI 使用指南
上来直接在webpack里将Mint UI引入项目,发现各种问题.饿了么组件库文档太坑了,好多地方写错,有些该说明的地方没说,比如例子里单文件.vue组件里用的类post-css处理器,我一直使用SA ...
- Mint UI Example的运行
Mint -UI是新推出的移动端UI框架 官网 不过官网上的文档例子不是很全面. 建议下载他们提供的example来学习. 1.examplle源码下载地址 2.打开项目,我这里使用webstorm, ...
随机推荐
- python路径相关操作
#获取当前文件所在目录filedir = __file__ print os.path.dirname(filedir) #获取文件名print os.path.basename(filedir)
- php开启pdo扩展
在Windows环境下php 5.1以上版本中,pdo和主要数据库的驱动同php一起作为扩展发布,要激活它们只需要简单地编辑php.ini文件. 打开php.ini配置文件,找到extension=p ...
- IE初始
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 记前些日子archlinux更新后无法调节声音的解决方法
桌面环境用的是xfce4. 自从某次更新过后,panel中调节声音的插件变成了 xfce4-pulseaudio-plugin.然后就发现在panel中无法调节声音了. 在这个插件的属性中发现了一项设 ...
- would you please...could you please...两句区别是什么?
Could you please 是can you please 更为礼貌.委婉的说法,并不是过去式,是“能否麻烦你……”.“请你……”的意思,更侧重“能否”及客观情况:回答时要注意,eg:A:“Co ...
- css 文字样式
Gradient 3D text 代码区域 /*css */ body { background-color: #272727; } h1 { font-family: "Arial&quo ...
- Keras 资料
http://www.360doc.com/content/17/0415/12/1489589_645772879.shtml http://adventuresinmachinelearning. ...
- 20155228 2016-2017-2 《Java程序设计》第10周学习总结
20155228 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 网络 网络是能够波此通信的计算机的集合根据范}到的宽度,网络可以分为局域网和广域网.LAN ...
- locust 的使用
Contents Locust这一款开源性能测试工具.然而,当前在网络上针对Locust的教程极少,不管是中文还是英文,基本都是介绍安装方法和简单的测试案例演示,但对于较复杂测试场景的案例演示却基本没 ...
- SQL小结
1. 一般而言,除非你确实需要表中的每一列,否则最好别使用*通配符.虽然使用通配符让你自己省事,不用明确列出所需列,但检索不需要的列通常会降低检索和应用程序的性能. 2. DISTINCT关键字作用于 ...