<!-- * @Description: In User Settings Edit * @Author: your name * @Date: 2019-09-24 12:34:06 * @LastEditTime: 2019-10-15 13:55:04 * @LastEditors: Please set LastEditors --> <template> <div id="tabBar" style="height: 100%;width:100%;"> <transition> <keep-alive> <router-view v-if="$route.meta.keepAlive"/> </keep-alive> </transition> <transition> <router-view v-if="!$route.meta.keepAlive"/> </transition> <tabbar slot="bottom" class="vux-tabbar" icon-class="vux-center"> <tabbar-item :link="{path:'/tab/home-page'}" :selected="$route.path === '/' || $route.path==='/tab/home-page'"> <img slot="icon-active" src="../assets/image/tab/home@2x.png"> <img slot="icon" src="../assets/image/tab/n_home@2x.png"> <span slot="label">主页</span> </tabbar-item> <tabbar-item :link="{path:'/tab/message-center'}" :selected="$route.path === '/tab/message-center'"> <img slot="icon-active" src="../assets/image/tab/message@2x.png"> <img slot="icon" src="../assets/image/tab/n_message@2x.png"> <span slot="label">消息</span> </tabbar-item> <tabbar-item :link="{path:'/tab/my-info'}" :selected="$route.path === '/tab/my-info'"> <img slot="icon-active" src="../assets/image/tab/my@2x.png"> <img slot="icon" src="../assets/image/tab/n_my@2x.png"> <span slot="label">我的</span> </tabbar-item> </tabbar> <!--</view-box>--> </div> </template> <script> export default { components: {}, data() { return { pathList: [], transitionName: '', } }, watch: { // 监听路由变化 $route(to, from) { if (this.pathList.includes(to.path)) { const index = (this.pathList.findIndex(() => { return from.path })) this.pathList.splice(index, 1) this.$router.isBack = true } else { this.pathList.push(to.path) this.$router.isBack = false } if (to.path === '/tab/home-page') { this.$router.isBack = true this.pathList = [] } let isBack = this.$router.isBack if (isBack) { this.transitionName = 'router-slide-right' } else { this.transitionName = 'router-slide-left' } this.$router.isBack = false }, }, methods: { tabClick() { // console.log('click'); }, }, } </script> <style lang="less"> #tabBar { .weui-tabbar { background-color: #ffffff; } .weui-tab__panel { padding-bottom: 0px !important; } .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon > i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{ color: @headerColor; } .weui-tabbar__item .weui-tabbar__label{ color: #4A4A4A; } .weui-tab { position: fixed; height: 100%; bottom: 0; width: 100%; .vux-tabbar { .weui-tabbar__item { p { font-size: 24px; } img { width: 44px; height: 44px; } } } } } // iPhoneX适配 @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { .weui-tabbar { padding-bottom: 34px; } } } @media (device-width: 414px) and (device-height: 896px) { .platform-ios { .weui-tabbar { padding-bottom: 34px; } } } </style>