微信小程序 - 导航栏（TabBar）实现（原生实现、Vant Weapp 实现）

一、导航栏

{
    "pages": [
        "pages/home/home",
        "pages/goods/goods",
        "pages/cart/cart",
        "pages/mine/mine"
    ],
    
    ...
    
    "tabBar": {
        "color": "#999999",
        "selectedColor": "#3D98FF",
        "backgroundColor": "#ffffff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/home/home",
                "text": "首页",
                "iconPath": "assets/imgs/home.png",
                "selectedIconPath": "assets/img/home2.png"
            },
            {
                "pagePath": "pages/goods/goods",
                "text": "商品",
                "iconPath": "assets/imgs/gift.png",
                "selectedIconPath": "assets/img/gift2.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath": "assets/imgs/cart.png",
                "selectedIconPath": "assets/img/cart2.png"
            },
            {
                "pagePath": "pages/mine/mine",
                "text": "我的",
                "iconPath": "assets/imgs/user.png",
                "selectedIconPath": "assets/img/user2.png"
            }
        ]
    }
}

• 这段代码是微信小程序项目中，app.json 文件中，用于配置底部导航栏（TabBar）的模板代码

• tabBar 是一个对象，它包含了底部导航栏的各种配置信息，例如，文字颜色、选中文字颜色、背景颜色、边框样式、导航栏的每个菜单项列表

1、color

• 类型：字符串，十六进制颜色码

• 含义：表示底部导航栏未选中时文字的颜色

2、selectedColor

• 类型：字符串，十六进制颜色码

• 含义：表示底部导航栏选中时文字的颜色

3、backgroundColor

• 类型：字符串，十六进制颜色码

• 含义：底部导航栏的背景颜色

4、borderStyle

• 类型：字符串

• 含义：底部导航栏顶部边框的颜色，仅支持 black、white

5、list

• 类型：数组，其中的每个元素是一个导航菜单项对象

• 含义：导航栏的菜单项对象列表

• 注：最少需要配置 2 个菜单项对象，最多可以配置 5 个菜单项对象

（1）pagePath

• 类型：字符串

• 含义：点击该菜单项时要跳转的页面路径

（2）text

• 类型：字符串

• 含义：菜单项显示的文字

（3）iconPath

• 类型：字符串

• 含义：菜单项未选中时显示的图标路径，指向本地的图片文件

（4）selectedIconPath

• 类型：字符串

• 含义：菜单项选中时显示的图标路径，指向本地的图片文件

---

二、Vant Weapp 导航栏

1、引入 Vant Weapp

• Vant Weapp 官网地址：https://vant-ui.github.io/vant-weapp/#/quickstart

1. 安装 Vant Weapp：npm i @vant/weapp -S --production

2. 修改 app.json：将 app.json 中的 "style": "v2" 去除

3. 点击 【工具】 -> 点击 【构建 npm】

2、具体实现

（1）home

• home.json

{
	"navigationBarTitleText": "首页",
	"usingComponents": {
		"van-tabbar": "@vant/weapp/tabbar/index",
		"van-tabbar-item": "@vant/weapp/tabbar-item/index"
	}
}

• home.html

<view class="page">
    <view>首页</view>

    <!-- 底部导航栏 -->
    <van-tabbar bind:change="onChangeTab" active="{{ active }}">
        <van-tabbar-item icon="home-o" url="/pages/home/home">首页</van-tabbar-item>
        <van-tabbar-item icon="gift-o" url="/pages/goods/goods">商品</van-tabbar-item>
        <van-tabbar-item icon="cart-o" url="/pages/cart/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-o" url="/pages/mine/mine">我的</van-tabbar-item>
    </van-tabbar>
</view>

• home.js

Page({
	data: {
		active: 0,
	},

	onChangeTab(event) {
		const { index } = event.detail;
		this.setData({ active: index });

		const pages = ["/pages/home/home", "/pages/goods/goods", "/pages/cart/cart", "/pages/mine/mine"];
		wx.switchTab({
			url: pages[index],
		});
	},
});

（2）goods

• goods.json

{
	"navigationBarTitleText": "商品",
	"usingComponents": {
		"van-tabbar": "@vant/weapp/tabbar/index",
		"van-tabbar-item": "@vant/weapp/tabbar-item/index"
	}
}

• goods.html

<view class="page">
    <view>商品</view>

    <!-- 底部导航栏 -->
    <van-tabbar bind:change="onChangeTab" active="{{ active }}">
        <van-tabbar-item icon="home-o" url="/pages/home/home">首页</van-tabbar-item>
        <van-tabbar-item icon="gift-o" url="/pages/goods/goods">商品</van-tabbar-item>
        <van-tabbar-item icon="cart-o" url="/pages/cart/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-o" url="/pages/mine/mine">我的</van-tabbar-item>
    </van-tabbar>
</view>

• goods.js

Page({
	data: {
		active: 1,
	},

	onChangeTab(event) {
		const { index } = event.detail;
		this.setData({ active: index });

		const pages = ["/pages/home/home", "/pages/goods/goods", "/pages/cart/cart", "/pages/mine/mine"];
		wx.switchTab({
			url: pages[index],
		});
	},
});

（3）cart

• cart.json

{
	"navigationBarTitleText": "购物车",
	"usingComponents": {
		"van-tabbar": "@vant/weapp/tabbar/index",
		"van-tabbar-item": "@vant/weapp/tabbar-item/index"
	}
}

• cart.html

<view class="page">
	<view>购物车</view>
    
    <!-- 底部导航栏 -->
    <van-tabbar bind:change="onChangeTab" active="{{ active }}">
        <van-tabbar-item icon="home-o" url="/pages/home/home">首页</van-tabbar-item>
        <van-tabbar-item icon="gift-o" url="/pages/goods/goods">商品</van-tabbar-item>
        <van-tabbar-item icon="cart-o" url="/pages/cart/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-o" url="/pages/mine/mine">我的</van-tabbar-item>
    </van-tabbar>
</view>

• cart.js

Page({
	data: {
		active: 2,
	},

	onChangeTab(event) {
		const { index } = event.detail;
		this.setData({ active: index });

		const pages = ["/pages/home/home", "/pages/goods/goods", "/pages/cart/cart", "/pages/mine/mine"];
		wx.switchTab({
			url: pages[index],
		});
	},
});

（4）mine

• mine.json

{
	"navigationBarTitleText": "我的",
	"usingComponents": {
		"van-tabbar": "@vant/weapp/tabbar/index",
		"van-tabbar-item": "@vant/weapp/tabbar-item/index"
	}
}

• mine.html

<view class="page">
    <view>我的</view>

    <!-- 底部导航栏 -->
    <van-tabbar bind:change="onChangeTab" active="{{ active }}">
        <van-tabbar-item icon="home-o" url="/pages/home/home">首页</van-tabbar-item>
        <van-tabbar-item icon="gift-o" url="/pages/goods/goods">商品</van-tabbar-item>
        <van-tabbar-item icon="cart-o" url="/pages/cart/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="user-o" url="/pages/mine/mine">我的</van-tabbar-item>
    </van-tabbar>
</view>

• mine.js

Page({
	data: {
		active: 3,
	},

	onChangeTab(event) {
		const { index } = event.detail;
		this.setData({ active: index });

		const pages = ["/pages/home/home", "/pages/goods/goods", "/pages/cart/cart", "/pages/mine/mine"];
		wx.switchTab({
			url: pages[index],
		});
	},
});