自定义导航栏

在小程序中，当你使用自定义导航栏时，默认情况下是没有系统提供的回退按钮的。为了实现回退按钮，你需要在自定义导航栏中手动添加一个按钮，并为其绑定返回上一页的功能。

以下是如何在自定义导航栏中添加一个回退按钮的步骤：

1. 设置 navigationStyle 为 custom

你已经设置了 navigationStyle 为 custom，这一步是正确的，用于禁用系统默认的导航栏。

json复制代码

	{
	"path": "Book/index",
	"style": {
	"navigationStyle": "custom",
	"enablePullDownRefresh": false
	}
	}

2. 创建自定义导航栏组件

在你的自定义导航栏组件中，添加一个回退按钮。

custom-nav-bar.wxml

xml复制代码

	返回
	{ {title}}

custom-nav-bar.wxss

css复制代码

	.nav-bar {
	display: flex;
	align-items: center;
	justify-content: space-between; /* 让按钮和标题分开 */
	height: 44px;
	background-color: #ffffff;
	padding: 0 16px; /* 给导航栏添加一些内边距 */
	}
	.back-button {
	background-color: transparent;
	border: none;
	color: #007aff; /* 蓝色，类似系统按钮 */
	font-size: 16px;
	}
	.nav-bar-title {
	color: #000000;
	font-size: 18px;
	font-weight: bold;
	flex-grow: 1; /* 让标题占据剩余空间 */
	text-align: center;
	}

3. 在组件中添加返回逻辑

在 custom-nav-bar.js 中实现返回上一页的逻辑：

javascript复制代码

	Component({
	properties: {
	title: {
	type: String,
	value: ''
	}
	},
	methods: {
	goBack() {
	wx.navigateBack();
	}
	}
	});

4. 在页面中使用自定义导航栏组件

确保在页面文件中引用并使用这个自定义导航栏组件。

page.wxml

xml复制代码

page.js

javascript复制代码

	Page({
	data: {
	pageTitle: "书籍"
	},
	onLoad(options) {
	if (options.title) {
	this.setData({
	pageTitle: options.title
	});
	}
	}
	});

5. 注册组件

确保你在页面的 json 文件中注册了这个自定义组件（如果它不是一个全局组件）：

json复制代码

	{
	"usingComponents": {
	"custom-nav-bar": "/path/to/custom-nav-bar"
	}
	}

通过这些步骤，你就可以在自定义导航栏中添加一个返回按钮，并实现返回上一页的功能。这样可以让用户在导航时有更好的体验。