uni-app 进入子页面切换导航栏

在uni-app中，进入子页面时切换导航栏标题或样式是一个常见的需求。以下是一个示例，展示如何在进入子页面时切换导航栏标题。

主页面 (index.vue)

<template>
  <view>
    <button @click="navigateToDetail">进入详情页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToDetail() {
      uni.navigateTo({
        url: '/pages/detail/detail?title=详情页标题',
        success: function (res) {
          // 可以在这里做一些页面跳转成功后的操作
        },
        fail: function (err) {
          console.error('导航失败', err);
        }
      });
    }
  }
}
</script>

<style>
/* 主页面样式 */
</style>

子页面 (detail.vue)

<template>
  <view>
    <text>{{ title }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '默认标题'
    };
  },
  onLoad(options) {
    // 从路由参数中获取标题
    if (options && options.title) {
      this.title = options.title;
    }

    // 设置导航栏标题
    #ifdef MP-WEIXIN // 微信小程序
    const navigationBarTitleText = this.title;
    wx.setNavigationBarTitle({
      title: navigationBarTitleText
    });
    #endif

    #ifdef APP-PLUS // App平台
    plus.webview.currentWebview().setTitle(this.title);
    #endif

    #ifdef H5 // H5平台
    document.title = this.title;
    #endif
  }
}
</script>

<style>
/* 子页面样式 */
</style>

注意事项

1. 条件编译：在uni-app中，不同平台可能需要不同的API来设置导航栏标题。示例中使用了条件编译来区分微信小程序、App平台和H5平台。
2. 路由参数：在navigateTo方法中，通过URL传递参数给子页面，子页面在onLoad生命周期函数中接收这些参数。
3. API调用：确保在调用设置导航栏标题的API时，页面已经加载完成。

通过这种方式，你可以在进入子页面时动态地设置导航栏标题。如果需要切换导航栏的样式（如背景色、字体颜色等），可以根据平台API进行相应的设置。例如，在微信小程序中可以使用wx.setNavigationBarStyle来设置导航栏样式。