• beused::沉浸式导航栏

页面单独配置

在使用 Taro 开发多页面应用时，有时需要对某个页面进行单独的配置，比如设置页面标题、导航栏样式等。Taro 支持在页面的配置文件或者页面文件中通过 config 来实现页面级别的个性化配置。

示例代码整合

假设项目结构如下：

src/pages/home/index.tsx
src/pages/home/index.config.js

index.config.js 内容：

export default {
  navigationBarTitleText: '首页',
  enablePullDownRefresh: true,
}

index.tsx 内容：

export default function Home() {
  return <View>欢迎来到首页</View>
}
// 可选：这里也可直接写 config 覆盖 index.config.js 中内容
// export const config = {
//   navigationBarTitleText: '首页',
// }

这样，该页就拥有了独立于其他页面的导航栏标题和开启了下拉刷新功能。

页面配置方式

在页面目录下新建配置文件

可以在某个页面目录下新建一个同名的 .config.js（或 .config.ts）文件，专门用于该页面的配置：

export default {
  navigationBarTitleText: '自定义标题',
  navigationBarBackgroundColor: '#ffffff',
  enablePullDownRefresh: true,
}

Taro 会自动识别并合并这些配置信息，优先使用该文件中的设置覆盖全局或 app 配置。

在页面文件中导出 config 对象

也可以直接在对应的 tsx 或 js 文件中导出一个 config 对象：

export default function MyPage() {
  // 页面组件内容
}
 
export const config = {
  navigationBarTitleText: '我的单页标题',
  backgroundColor: '#f0f0f0',
}

这种方式更适合简单的单页配置，且方便维护。

常用的页面单独配置项

• navigationBarTitleText: 设置导航栏标题文本
• navigationBarBackgroundColor: 导航栏背景颜色
• navigationBarTextStyle: 导航栏文字颜色，支持 'black' 或 'white'
• backgroundColor: 窗口背景色
• enablePullDownRefresh: 是否开启下拉刷新功能，布尔值
• disableScroll: 是否禁用滚动，布尔值
• usingComponents: 页面自定义组件声明

注意事项

• 配置项名称和小程序官方文档保持一致，但部分属性可能因平台差异不完全支持，需要查阅具体平台文档。
• 页面级别配置会覆盖全局或者 app 的相同字段。
• 配置修改后需要重新编译生效。