vue组件tabbar使用方法详解
程序员文章站
2023-10-27 23:16:40
本文实例为大家分享了vue组件tabbar的具体使用方法,供大家参考,具体内容如下
1.app.vue
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 根据给定的一个概率数组随机分配概率
下一篇: 原生DOM操作方法小结