返回

自定义小程序导航栏和底部导航栏

前端

引子

微信小程序以其便捷性、强大的功能性和广泛的应用场景而著称。随着小程序开发的深入,开发者们不断探索新的方法来优化用户体验,其中自定义导航栏和底部导航栏就是两个重要的方面。本文将深入探讨如何自定义小程序导航栏的返回按钮以及使用 WEUI 自带的 tabbar 随自定义导航栏返回按钮变化当前选择效果,助力开发者打造更加人性化、交互流畅的小程序。

自定义导航栏返回按钮

默认情况下,小程序导航栏的返回按钮仅支持返回上一页面。然而,在某些场景下,开发者需要自定义返回按钮的行为,以满足特定的需求。例如,当页面包含多个 tab 时,点击返回按钮需要返回到当前 tab 的上一级页面,而不是小程序的上一级页面。

要实现自定义返回按钮的行为,需要使用 Taro.navigateBack() 方法。该方法接收一个数字参数,指定需要返回的页面数。例如,要返回到当前 tab 的上一级页面,可以使用以下代码:

Taro.navigateBack({
  delta: 1
});

使用 WEUI 自带的 tabbar 随自定义导航栏返回按钮变化当前选择效果

WEUI 提供了一个功能强大的 tabbar 组件,可以轻松实现底部导航栏。但是,默认情况下,tabbar 的当前选择效果不会跟随自定义导航栏的返回按钮变化。要实现这一效果,需要在小程序的 app.js 文件中进行如下配置:

App({
  onLaunch() {
    wx.getSystemInfo({
      success: res => {
        this.globalData.systemInfo = res;
      }
    });
  },
  globalData: {
    systemInfo: null
  }
});

然后,在需要使用 tabbar 的页面中,使用 Taro.useDidShow() 生命周期函数,在页面显示时监听当前 tab 的变化:

Taro.useDidShow(() => {
  const { current } = this.state;
  const { systemInfo } = this.props.globalData;
  if (systemInfo.platform === 'ios') {
    wx.setTabBarBadge({
      index: current,
      text: ''
    });
  } else {
    wx.setTabBarItem({
      index: current,
      text: ''
    });
  }
});

通过以上配置,当点击自定义导航栏的返回按钮返回到当前 tab 的上一级页面时,tabbar 的当前选择效果将随之变化。

案例演示

为了更好地理解本文介绍的方法,我们提供了一个演示案例。该案例使用自定义导航栏和 WEUI tabbar,并实现返回按钮返回到当前 tab 的上一级页面以及 tabbar 当前选择效果随返回按钮变化的功能。

总结

本文深入探讨了如何在微信小程序中自定义导航栏返回按钮以及使用 WEUI 自带的 tabbar 随自定义导航栏返回按钮变化当前选择效果。通过这些技术,开发者可以创建更加灵活、交互流畅的小程序,提升用户体验。