uniapp微信小程序使用 uview-plus 底部自定义导航栏_微信 小程序 u-tabbar

uniapp使用 uview-plus 底部导航栏：
参考地址：uniapp使用 uview-plus 底部导航栏(vue3项目)

使用pinia存储数据,vue3，js
创建同pages同级的custom-tab-bar里面包含index文件.(文件命名-微信小程序自定义推荐)

<u-tabbar
  :value="indexStore.activeTab"
  :fixed="true"
  :placeholder="true"
  :safeAreaInsetBottom="true"
  >
  	<u-tabbar-item
      v-for="(item, index) in tabbarItems" :key="index"
      :text="item.text"
      @click="handleClick(item, index)">
      <template #active-icon>
      	<image
        :src="item.selectIconPath"
        mode="widthFix"
      	></image>
      </template>
      <template #inactive-icon>
      	<image
      	:src="item.iconPath"
         mode="widthFix"
      	></image>
      </template>
    </u-tabbar-item>
  </u-tabbar>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script setup>
  import { ref } from 'vue';
  import useIndexStore from '@/store/index.js'

  const indexStore = useIndexStore()
  
  const tabbarItems = [
    {
      pagePath: '/pages/index/index',
      text: 'HOME',
      iconPath: '/static/home_no_active.png',
      selectIconPath: '/static/home_active.png'
    },
    {
      pagePath: '',
      text: 'SERVICE',
      iconPath: '/static/service_no_active.png',
      selectIconPath: '/static/service_active.png',
    },
  ]
  // tabbar按钮事件
  function handleClick(item, index) {
    indexStore.setTabbarActive(index) // 切换页面时可以定位当前tab
     const path = item.pagePath
      uni.switchTab({
        url: path
      })
    }
  }
</script>
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
30

在pages.json文件里配置

"tabBar": {
    "custom": true, // 可以显示自定义组件
    "list": [
      {
        "pagePath": "pages/index/index"
      },
      {
        "pagePath": "pages/service/service"
      }
    ]
  },
1
2
3
4
5
6
7
8
9
10
11

在store里配的activeTab

// store.js
import { defineStore } from 'pinia';
const useIndexStore = defineStore('index', {
  state() {
	return {
	  activeTab: 0 // 默认选中索引，我默认选第一个
	}
  },
  actions: {
   	// 设置active的值
   	setTabbarActive(active){
      this.activeTab = active;
  	}
  }
}
export default useIndexStore;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16