03 首页顶部开发-CSDN博客

本文链接：https://blog.csdn.net/weixin_45529137/article/details/126673548

本文介绍了uni-app中如何配置pages.json以实现首页顶部的定制，包括设置导航栏文字、颜色以及使用自定义导航栏。同时，提到了在小程序中实现头部自定义的方法，需要在pages.json中添加"navigationStyle":"custom"，并在对应的vue文件中插入小程序头部代码。

摘要由CSDN通过智能技术生成

1.效果图

在这里插入图片描述

2.配置pages.json

首页顶部需要在pages.json中配置，代码如下：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "百年奥莱",
				"navigationBarBackgroundColor": "#FFFFFF",
				"navigationStyle": "custom",
				"app-plus": {
					"titleNView": {
						"buttons": [
							{
								"float": "left",
								"fontSrc": "./static/font/iconfont.ttf",
								"text": "\ue6e4"
							},
							{
								"float": "right",
								"fontSrc": "./static/font/iconfont.ttf",
								"text": "\ue665"
							}
						]
					}
				}
			}
		},
		{
			"path": "pages/list/list",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/shopCart/shopCart",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
			"path": "pages/my/my",
			"style": {
				"navigationBarTitleText": "uni-app"
				
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "百年奥莱",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
		
	},

	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#49BDFB",
		"borderStyle": "black",
		"spacing": "8px",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/tabbar/shouye.png",
			"selectedIconPath": "static/tabbar/shouye1.png",
			"text": "首页"
		}, {
			"pagePath": "pages/list/list",
			"iconPath": "static/tabbar/fenlei.png",
			"selectedIconPath": "static/tabbar/fenlei1.png",
			"text": "分类"
		}, {
			"pagePath": "pages/shopCart/shopCart",
			"iconPath": "static/tabbar/gouwuche.png",
			"selectedIconPath": "static/tabbar/gouwuche1.png",
			"text": "购物车"
		}, {
			"pagePath": "pages/my/my",
			"iconPath": "static/tabbar/wode.png",
			"selectedIconPath": "static/tabbar/wode1.png",
			"text": "我的"
		}]
	}

}

3.注意事项

app-plus在app中和H5生效，各种小程序不生效，如需定制小程序的头部需要这样做：

pages.json中加入： “navigationStyle”:“custom”

page/index/index.vue中写入:

<!-- #ifdef MP-WEIXIN -->
		<view>
			....你的小程序头部...
		</view>
<!-- #endif -->