《Vux踩坑记》之 Tabbar

最新推荐文章于 2021-11-30 17:02:40 发布

weixin_34411563

最新推荐文章于 2021-11-30 17:02:40 发布

阅读量1k

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/gmarshal/blog/1827973

版权

2019独角兽企业重金招聘Python工程师标准>>>

《Vux踩坑记》之 Tabbar

思路

总共4个页面，每个页面的底部有tabbar，分别为首页、监控、告警、我的，通过点击不同item进入不同页面

要求

点击跳转后，tabbar选中相应的item。

决定：

通过mutations去跳转

代码

封装Tabbar.vue

<template>
  <div>
    <tabbar v-model="tabbarIndex" style="position: fixed">
      <tabbar-item @on-item-click="gotoTabbarPage(0)">
        <img slot="icon" src="../../assets/home/homepage.png">
        <img slot="icon-active" src="../../assets/home/homepage_fill.png">
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item @on-item-click="gotoTabbarPage(1)">
        <img slot="icon" src="../../assets/home/dynamic.png">
        <img slot="icon-active" src="../../assets/home/dynamic_fill.png">
        <span slot="label">监控</span>
      </tabbar-item>
      <tabbar-item @on-item-click="gotoTabbarPage(2)">
        <img slot="icon" src="../../assets/home/remind.png">
        <img slot="icon-active" src="../../assets/home/remind_fill.png">
        <span slot="label">告警</span>
      </tabbar-item>
      <tabbar-item @on-item-click="gotoTabbarPage(3)">
        <img slot="icon" src="../../assets/home/people.png">
        <img slot="icon-active" src="../../assets/home/people_fill.png">
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>
  </div>
</template>

<script>
  import { Tabbar, TabbarItem, Group, Cell } from 'vux'

  export default {
    name: 'MyTabbar',
    components: {
      Tabbar,
      TabbarItem,
      Group,
      Cell
    },
    data () {
      return {
        // 从state中获取全局tabbarIndex
        tabbarIndex: this.$store.state.tabbarIndex
      }
    },
    methods: {
      gotoTabbarPage (tabbarIndex) {
        // 由于这里需要更改全局tabbarIndex,所以必须通过mutations方式去跳转
        // 更新底部菜单index
        this.$store.dispatch('updateTabbarIndex', {tabbarIndex: tabbarIndex})
      }
    }
  }
</script>

关键点

v-model="tabbarIndex"，内置方法，会选中索引等于tabbarIndex的item，其中tabbarIndex的值可以通过$store获取

data () {
      return {
        // 从state中获取全局tabbarIndex
        tabbarIndex: this.$store.state.tabbarIndex
      }
}

actions.js

import * as types from './mutation-types.js'

// 更新全局tabbar索引
export const updateTabbarIndex = ({commit}, param) => {
  commit(types.UPDATE_TABBAR_INDEX, {
    tabbarIndex: param.tabbarIndex
  })
}

mutation-types.js

export const UPDATE_TABBAR_INDEX = 'UPDATE_TABBAR_INDEX'

mutations.js

import * as types from './mutation-types.js'
import VueRouter from '../router/routes.js'

export default {
  [types.UPDATE_TABBAR_INDEX] (state, {tabbarIndex}) {
    console.log('执行UPDATE_TABBAR_INDEX,tabbarIndex=' + tabbarIndex)
    // 改变值
    state.tabbarIndex = tabbarIndex
    if (tabbarIndex === 0) {
      VueRouter.push({
        path: '/home'
      })
    }
    if (tabbarIndex === 3) {
      VueRouter.push({
        path: '/account'
      })
    }
  }
}

state.js