1.App.vue

<!-- 入口文件 -->
<template>
<div id="app">
<!-- 视图层 -->
<router-view></router-view>
<!-- 底部选项卡 -->
<tabbar @on-index-change="onIndexChange" v-if="tabbarShow">
<tabbar-item selected link="/home">
<img slot="icon" src="./assets/img/ic_tab_home_normal.png">
<img slot="icon-active" src="./assets/img/ic_tab_home_active.png">
<span slot="label">首页</span>
</tabbar-item>
<tabbar-item show-dot link="/audioBook">
<img slot="icon" src="./assets/img/ic_tab_subject_normal.png">
<img slot="icon-active" src="./assets/img/ic_tab_subject_active.png">
<span slot="label">书影音</span>
</tabbar-item>
<tabbar-item badge="2" link="/mine">
<img slot="icon" src="./assets/img/ic_tab_profile_normal.png">
<img slot="icon-active" src="./assets/img/ic_tab_profile_active.png">
<span slot="label">我的</span>
</tabbar-item>
</tabbar>
</div>
</template> <script>
// 引入 vux tabbar 组件
import { Tabbar, TabbarItem } from 'vux'
// 引入 vuex 的两个方法
import {mapGetters, mapActions} from 'vuex' export default {
name: 'app',
components:{
Tabbar,
TabbarItem
},
data() {
return {
select:"Home"
}
},
// 计算属性
computed:mapGetters([
// 从 getters 中获取值
'tabbarShow'
]),
// 监听,当路由发生变化的时候执行
watch:{
$route(to,from){
if(to.path == '/' || to.path == '/home' || to.path == '/audioBook' || to.path == '/mine'){
/**
* $store来自Store对象
* dispatch 向 actions 发起请求
*/
this.$store.dispatch('showTabBar');
}else{
this.$store.dispatch('hideTabBar');
}
}
},
methods: {
onIndexChange (newIndex, oldIndex) {
console.log(newIndex, oldIndex);
}
}
}
</script> <style lang="less" scoped> </style>

2.效果图

3.其他情况

<template>
<div class="weui-tab">
<div class="weui-tab__panel">
<p v-for="i in 100">{{i}}</p>
</div>
<tabbar>
<!--use v-link-->
<tabbar-item v-link="{path:'/component/cell'}">
<img slot="icon" src="../assets/demo/icon_nav_button.png">
<span slot="label">Wechat</span>
</tabbar-item>
<!--use http link-->
<tabbar-item show-dot link="https://vux.li">
<img slot="icon" src="../assets/demo/icon_nav_msg.png">
<span slot="label">Message</span>
</tabbar-item>
<!--use vue-router link-->
<tabbar-item selected link="/component/cell">
<img slot="icon" src="../assets/demo/icon_nav_article.png">
<span slot="label">Explore</span>
</tabbar-item>
<!--use vue-router object link-->
<tabbar-item :link="{path:'/component/cell'}">
<img slot="icon" src="../assets/demo/icon_nav_cell.png">
<span slot="label">News</span>
</tabbar-item>
</tabbar>
</div>
</template> <script>
import { Tabbar, TabbarItem } from 'vux'
export default {
ready () {
document.querySelector('body').style.height = '100%'
document.querySelector('html').style.height = '100%'
document.querySelector('#app').style.height = '100%'
},
components: {
Tabbar,
TabbarItem
}
}
</script>

.

vux tabbar 组件的更多相关文章

  1. vux Tabbar组件入门备忘大佬多指点

    一.Tabbar引入及使用 1.新创建vue文件 2.在vue文件中添加插件 <template> <div> <tabbar style="position: ...

  2. Taro-ui TabBar组件使用路由跳转

    1. 安装taro-ui (此处使用cnpm) cnpm install taro-ui 2. 全局引入样式 app.scss sass :@import "~taro-ui/dist/st ...

  3. react 自定义 TabBar 组件

    1.创建 组件 src/components/TabBar/index.js /** * TabBar 组件 */ import React ,{ PureComponent } from 'reac ...

  4. weex 项目开发(四)项目框架搭建 及 自定义 TabBar 组件

    1.安装  路由模块  及  状态管理模块 npm install vue-router --save npm install vuex --save 2.自定义  TabBar  组件 src / ...

  5. vue 做的tabBar组件

    效果如下 调用 <tabbar :selected='selected'></tabbar> 组件 <template> <div class='tabbar ...

  6. Flutter——TabBar组件(顶部Tab切换组件)

    TabBar组件的常用属性: 属性 描述 tabs 显示的标签内容,一般使用 Tab 对象,也可以是其他的Widget  controller TabController 对象 isScrollabl ...

  7. Nuxt/Vue自定义导航栏Topbar+标签栏Tabbar组件

    基于Vue.js实现自定义Topbar+Tabbar组件|仿咸鱼底部凸起导航 最近一直在倒腾Nuxt项目,由于Nuxt.js是基于Vue.js的服务端渲染框架,只要是会vue,基本能很快上手了. 一般 ...

  8. 基于uniapp自定义Navbar+Tabbar组件「兼容H5+小程序+App端Nvue」

    uni-app跨端自定义navbar+tabbar组件|沉浸式导航条|仿咸鱼凸起标签栏 在跨端项目开发中,uniapp是个不错的框架.采用vue.js和小程序语法结构,使得入门开发更容易.拥有非常丰富 ...

  9. vue+vux 父组件控制子组件弹层

    知识点用到了vue父子组件之间的传值,以及使用watch和v-model控制vux中XDialog组件. 需要注意的问题: 1.父组件向子组件传值使用的是props(单向传值),子组件创建props, ...

随机推荐

  1. MySQL-03 SQL语句设计

    学习要点 SQL语句分类 DML语句 DML 查询语句 SQL语句分类 数据操纵语言(DML):用来操纵数据库中数据的命令.包括:SELECT.INSERT.UPDATE.DELETE. 数据定义语言 ...

  2. qcloudsms_py

    qcloudsms_py from qcloudsms_py import SmsVoicePromptSender from qcloudsms_py.httpclient import HTTPE ...

  3. bzoj 1051 受欢迎的牛-tarjan

    https://www.lydsy.com/JudgeOnline/problem.php?id=1051 如果A喜欢B,那么A->B连边,那么整个图储存下来,如果有好多个牛是受欢迎的,那么他们 ...

  4. 提高CPU使用率

    某些特殊时候,需要提升下cpu的利用率,此时……………………需要一个极其简单的脚本来完成! #!/bin/bash while (true);do { for i in $(seq 100000 10 ...

  5. 如何用纯 CSS 创作一个渐变色动画边框

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/odpRKX 可交互视频教 ...

  6. tornado框架基础03-请求与响应

    01 请求与响应 请求 浏览器在发送请求的时候,会发送具体的请求信息,由请求行,请求消息头,请求正文 请求消息头 向服务器传递附加信息 Accept: 浏览器可以接受的MIME类型. Accept-C ...

  7. java线程总结--synchronized关键字,原理以及相关的锁

    在多线程编程中,synchronized关键字非常常见,当我们需要进行“同步”操作时,我们很多时候需要该该关键字对代码块或者方法进行锁定.被synchronized锁定的代码块,只能同时有一条线程访问 ...

  8. 免费开源《OdooERP系统部署架构指南》试读:第一章 Odoo架构概述

    文/开源智造联合创始人老杨 本文来自<OdooERP系统部署架构指南>的试读章节.书籍尚未出版,请勿转载.欢迎您反馈阅读意见. 从web浏览器到PostgreSQL,多层与其他层交互以处理 ...

  9. Android API Guides 安卓API指导----第一部分:Introduction(介绍)

    第一部分: Introduction(介绍) 目录包含:APP  Fundamentals     (应用程序基础) Device   Compatibility(设备兼容性) System Perm ...

  10. 《算法导论》 — Chapter 7 快速排序

    序 快速排序(QuickSort)也是一种排序算法,对包含n个数组的输入数组,最坏情况运行时间为O(n^2).虽然这个最坏情况运行时间比较差,但是快速排序通常是用于排序的最佳实用选择,这是因为其平均性 ...