时间:2021-07-01 10:21:17 帮助过:12人阅读
本文实例为大家分享了vue组件tabbar的具体使用方法,供大家参考,具体内容如下
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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。