uniapp + uviewui —— u-tabbar的使用

Juliet_xmj

已于 2023-04-19 09:09:31 修改

阅读量1.3k

点赞数

分类专栏：插件及UI框架开发问题解决小程序文章标签： uni-app 前端微信小程序

于 2023-04-18 11:08:17 首次发布

本文链接：https://blog.csdn.net/juliet_xmj/article/details/130217239

版权

插件及UI框架开发问题解决同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

小程序

5 篇文章 0 订阅

订阅专栏

文章介绍了如何在uni-app中启用自定义tabBar并在Vue组件中使用Vuex进行状态管理，以实现底部导航的动态渲染和点击高亮效果。通过pages.json设置custom为true，结合Vuex的state、getters、mutations和actions进行数据绑定和更新。

摘要由CSDN通过智能技术生成

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

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

"tabBar": {
		"custom": true,
		"list": [
			{
				"pagePath": "pages/index/index"
			},
			{
				"pagePath": "pages/my/index"
			}
		]
	}

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: {}

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
		})
    }
}