uni-app实现底部导航栏以及会遇到的bug解决办法

最新推荐文章于 2025-05-16 17:57:19 发布

青衫折扇

最新推荐文章于 2025-05-16 17:57:19 发布

阅读量3k

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/qq_42543264/article/details/108737060

版权

uni-app 专栏收录该内容

60 篇文章

订阅专栏

我们先来看一下效果:

我们只需要在pages.js配置一下即可:

"pages": [
		{ // 首页
			"path": "pages/index/index",
			"style": {
				"enablePullDownRefresh": true,
				"navigationBarBackgroundColor": "#fff",
				"navigationBarTextStyle": "black",
				"backgroundColorTop": "#F7F7F7",
				"backgroundColorBottom": "#F7F7F7",
				"onReachBottomDistance": 50,
				"navigationStyle": "custom",
				"app-plus": {
					"titleNView": false,
					"pullToRefresh": {
						"support": true,
						"color": "#fa436a",
						"style": "default"
					}
				}
			}
		},
		{ // 分类
			"path": "pages/classify/classify-index/index",
			"style": {
				"navigationBarTitleText": "分类",
				"onReachBottomDistance": 50,
				"app-plus": {
					"bounce": "none",
					"titleNView": false
				}
			}
		},
		{ // 消息
			"path": "pages/notify/notify-index/index",
			"style": {
				"enablePullDownRefresh": true,
				"navigationBarTitleText": "消息中心",
				"app-plus": {
					"bounce": "none",
					"pullToRefresh": {
						"support": true,
						"color": "#fa436a",
						"style": "default"
					}
				}
			}
		},
		{ // 购物车
			"path": "pages/cart/index",
			"style": {
				"enablePullDownRefresh": true,
				"navigationBarTitleText": "购物车",
				"navigationBarTextStyle": "black",
				"app-plus": {
					//          "titleNView": false,
					//          "softinputNavBar": "none",
					// 禁用原生导航栏
					"pullToRefresh": {
						"support": true,
						"color": "#fa436a",
						"style": "default"
					}
				}
			}
		},
		{
			"path": "pages/my/my-index/index",
			"style": {
				"navigationBarTitleText": "我的"
			}
		}
],
"tabBar": {
		"color": "#C0C4CC",
		"selectedColor": "#fa436a",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/tabBar/tab-home.png",
				"selectedIconPath": "static/tabBar/tab-home-rf.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/classify/classify-index/index",
				"iconPath": "static/tabBar/tab-cate.png",
				"selectedIconPath": "static/tabBar/tab-cate-rf.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/notify/notify-index/index",
				"iconPath": "static/tabBar/tab-notify.png",
				"selectedIconPath": "static/tabBar/tab-notify-rf.png",
				"text": "消息"
			},
			{
				"pagePath": "pages/cart/index",
				"iconPath": "static/tabBar/tab-cart.png",
				"selectedIconPath": "static/tabBar/tab-cart-rf.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/my/my-index/index",
				"iconPath": "static/tabBar/tab-my.png",
				"selectedIconPath": "static/tabBar/tab-my-rf.png",
				"text": "我的"
			}
		]
	}

不要存在