uniapp + uviewui —— u-tabbar的使用

注： 每个底部导航页面里都要有该代码才能生效

1. pages.json 生效代码 “custom”: true

"tabBar": {
		"custom": true,
		"list": [
			{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/my/index"
			}
		]
	}
1
2
3
4
5
6
7
8
9
10
11

2.使用代码管理动态渲染绑定值

state: {
	pageValue: 0,
	pageList: [
		{
			path: 'pages/index/index',
			text: '首页',
			icon: 'home'
		},
		{
			path: 'pages/my/index',
			text: '我的',
			icon: 'account'
		},
	]
},
getters: {
	pageList: state => state.pageList,
	pageValue: state => state.pageValue
},
mutations: {
	SET_PAGE(state, data) {
		state.pageValue = data
	}
},
actions: {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

3. 页面具体使用及完善

<u-tabbar
      :value="pageValue"
      :fixed="true"
      :border="false"
      :placeholder="true"
      :safeAreaInsetBottom="true"
    >
      <u-tabbar-item
        v-for="item in pageList"
        :key="item.path"
        :icon="item.icon"
        :text="item.text"
        @click="clickPage(item)"
      />
  </u-tabbar>
import { mapGetters, mapMutations } from 'vuex'
computed: {
    ...mapGetters(['pageValue']),
    ...mapGetters(['pageList'])
  },
methods: {
	...mapMutations(['SET_PAGE']), // 注意参数必须是数组
	clickPage(item) {
		this.SET_PAGE(index) // 这样写底部导航高亮才是正确的
		uni.navigateTo({
			url: item.path
		})
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29