uniapp 封装自定义tabbar_uniapp vue3 tabar自定义封装

uniapp 封装自定义tabbar

开发框架 ：uView2.x

根据后端动态控制tabbar 的显示隐藏

注意：安装 uViewUI 。并且按照官网配置一下。注意 uviewUI 的版本，这里使用的是 uVIewUI2.x 版本。

1. 新建一个与 pages 文件夹同级的文件夹，叫做 components，存放公共组件

2. 在 components 文件夹中新建 tabbar组件

<template>
	<u-tabbar fixed :value="selected" @change="change1" activeColor="#ee0a24" :placeholder="false"
		:safeAreaInsetBottom="true">
		<u-tabbar-item v-for="(item, index) in tabbarList" :text="item.text" :key="index">
			<image class="tabbar-icon" slot="active-icon" :src="item.icon[1]"></image>
			<image class="tabbar-icon" slot="inactive-icon" :src="item.icon[0]"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>
1
2
3
4
5
6
7
8
9

<script>
	import request from "../../api/request";
	import * as api from "../../api/api";
	export default {
		name: "tab-bar",
		props: {
		    //  tabbar 的索引
			selected: {
				type: Number,
			},
		},
		data() {
			return {
			// tabbar 数据
				tabbarList: [{
				  // tabbar 的文字
					text: "",
					//  tabbar 的 图标
					icon: [],
					//  后端控制 tabbar 的显示和隐藏
					article_status: "",
				}, ],
			};
		},
		//  组件生命周期
		created() {
			//  根据 请求 返回数据   
			//  替换  tabbarList 数据   
		},

		methods: {
			change1(val) {
				let lujin = this.tabbarList[val].text;
				// 优化分支  ==>
				const map = {
					首页: "/pages/index/index",
					分类: "/pages/category/category",
					购物车: "/pages/cart/cart",
					我的: "/pages/mine/mine",
				};
				// 因为在pages中配置了需要跳转的页面为 tabbar页面 
               // 所以不能使用navigateTo 只能使用下面这个方法跳转。
				uni.switchTab({
					url: map[lujin],
				});
			},
		},
	};
</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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

3. 去 pages.json 配置一下，那些页面是 tabbar 的页面。并且去 app.vue 文件中，隐藏原生的tabbar

4. 根组件 app.vue 配置

<script>
export default {
  onLaunch: function () {
    // 隐藏tababr
    uni.hideTabBar();
  },
  onShow: function () {
    // 隐藏tabbar
    uni.hideTabBar();
  },
  // =========
  onHide: function () {},
};
</script>

<style lang="scss">
/*每个页面公共css */
@import "@/uni_modules/uview-ui/index.scss";
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

5. 去每个 tabbar 页面 引入tabbar 组件

仅在 首页 演示

<template>
	<view class="home">
        <!--  tabbar 组件 -->
		<tabbarVue :selected="selected"></tabbarVue>
	</view>
</template>
1
2
3
4
5
6

<script>
import tabbarVuefrom "@/components/tab-bar/tab-bar.vue"
	export default {
		data() {
			return {
                // 选中的 tabbar  注意  selected 类型为 **Number**
				selected: 0,
			}
		},
		 components: {  tabbarVue },
		  onLoad() {
				// 最好在每个 tabbar 页面都加上隐藏原生 tabbar
				uni.hideTabBar();
				// 请求接口获取 tabbar 数据
				// 得到返回数据 tabbarRes
				//  过滤掉被隐藏的 tabbar  
				let newArr = tabbarRes.filter((item) => {
        		  if (item.article_status == 1) {
            		return item;
          			}
				newArr.forEach((item, index) => {
					//  tabbar 文字等于首页  设置索引
         			 if (item.text == "首页") {
         			 // 设置索引
           			 this.selected = index;
         				 }
					 });

				}
				
	}
</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
31
32