vux tabbar 组件
组件 tabBar
2023-09-11 14:15:30 时间
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>
.
相关文章
- react 创建组件
- 62Vue - 自定义事件(使用自定义事件的表单输入组件)
- SpringMvc组件初始化
- uni-app 组件
- SwiftUI 文本组件之滚动动画数字组件 实现充满情感的微交互
- Flutter 组件之 Flutter高级自定义TabBar(教程含源码)
- HarmonyOS鸿蒙系统三大类布局都有哪些组件(布局类、显示类、交互类) HarmonyOS鸿蒙开发基础
- android四大组件之二-service实现原理分析
- Vue知识点总结(10)——全局组件的创建和使用(超级详细)
- TMS 20周年(秘诀是:兼职坚持了五年,开发,营销,销售,支持VCL组件的工作量超过了全职工作,然后再开公司)
- 简记:自定义tabBar的组件,pageLifeTimes中的show方法无法执行?
- 详解vue组件的keep-alive
- 2016年一季度光伏组件市场有望“脱困”
- freemarker写select组件报错总结(六)
- SolarWorld开发双面光伏组件并开始试用
- 微信小程序学习第10天——自定义组件(父子组件通信与behavior)、自定义tabBar组件