Taro 的页面同样是继承自 Component 组件基类,每一个页面都拥有自己配置 config,这个配置是针对当前页面配置,配置规范基于微信小程序的页面配置进行制定,所有平台进行统一。
页面文件中的 config 配置,在编译后将生成全局配置文件 app.json
页面的配置只能设置 全局配置 中部分 window 配置项的内容,页面中配置项会覆盖 全局配置 的 window 中相同的配置项。
配置示例:

  1. export default class Index extends Component {
  2. config = {
  3. navigationBarBackgroundColor: '#ffffff',
  4. navigationBarTextStyle: 'black',
  5. navigationBarTitleText: '首页',
  6. backgroundColor: '#eeeeee',
  7. backgroundTextStyle: 'light'
  8. }
  9. render () {
  10. return (
  11. <View className='index'>
  12. <Text>1</Text>
  13. </View>
  14. )
  15. }
  16. }

配置项列表

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor(十六进制颜色值) #000000 导航栏背景颜色,如 #000000
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black / white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式,仅支持以下值:default 默认样式;custom 自定义导航栏,只保留右上角胶囊按钮
backgroundColor String 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
backgroundColorTop String #ffffff 顶部窗口的背景色,仅 iOS 支持
backgroundColorBottom String #ffffff 底部窗口的背景色,仅 iOS 支持
enablePullDownRefresh boolean false 是否开启当前页面的下拉刷新。
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px
pageOrientation String portrait 屏幕旋转设置,支持 auto / portrait / landscape 详见 响应显示区域变化
disableScroll Boolean false 设置为 true 则页面整体不能上下滚动。
只在页面配置中有效,无法在 app.json 中设置
disableSwipeBack Boolean false 禁止页面右滑手势返回
usingComponents Object 页面自定义组件配置

各端支持程度如下

属性 微信小程序 百度小程序 字节跳动小程序 支付宝小程序 H5 RN
navigationBarBackgroundColor ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
navigationBarTextStyle ✔️ ✔️ ✔️ ✔️ ✔️
navigationBarTitleText ✔️ ✔️ ✔️ ✔️ ✔️ ✔️
navigationStyle ✔️(微信客户端 6.6.0) ✔️(百度 App 版本 11.1.0) ✔️ ✔️
backgroundColor ✔️ ✔️ ✔️ ✔️
backgroundTextStyle ✔️ ✔️ ✔️ ✔️
backgroundColorTop ✔️(微信客户端 6.5.16) ✔️
backgroundColorBottom ✔️(微信客户端 6.5.16) ✔️
enablePullDownRefresh ✔️ ✔️ ✔️ ✔️
onReachBottomDistance ✔️ ✔️ ✔️
pageOrientation ✔️2.4.0 (auto) / 2.5.0 (landscape)
disableScroll ✔️ ✔️
disableSwipeBack ✔️
usingComponents ✔️ ✔️ ✔️ ✔️

其中,usingComponents 一般不需要配置,只有在需要与引用原生小程序组件的时候才需要配置。