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

超、凢脫俗 2022-12-09 14:55 778阅读 0赞

我们先来看一下效果:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

我们只需要在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": "我的"
    			}
    		]
    	}

不要存在

// #ifdef MP
    // #endif

判断语句,不然会报错

还有就是启动页要和首页路径保持一致

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221123/d23ccaf847c74276bdd8638e2c3a76ec.png