js 导航图标切换_小程序实现滚动渐变的自定义导航条

背景

由于项目需要，需要在我们的详情页做一个详情页的滚动渐进增强的自定义导航条。接下来就简单记录下开发时的实现思路，以及自己实现中的问题，方便以后查阅。

前期准备

由于微信的限制，我们要实现单一页面的自定义导航条需要对这个页面进行配置才允许自定义。如果是所有页面都要自定义导航条，那就需要在 app.json 中全局配置了。具体配置如下：

"navigationStyle": "custom",

实现思路

首先我们要实现自定义导航条，那么我们就需要获得导航条的宽高和边距大小。用一个普通的盒子来模拟这导航条的样子，然后盒子的内部就可以放一些我们想放的元素和切换展示的 icon。

获取导航条的属性

获取导航条的宽高需要借助微信的两个 api：wx.getSystemInfo() 和 wx.getMenuButtonBoundingClientRect()，具体 api 描述请看微信官方文档。因为自定义导航条可能会在多个页面使用这个数据变量。故把获取数据的计算过程放在 app.js 中。计算的结果数据也存储到 app.js 的全局变量中，方便以后其它页面的取用。具体代码如下：

/**
   * 设置导航的高度
   */
  setNavBarHeight () {
    // 默认高度
    this.globalData.navHeight = 88
    // 默认距离上方的距离
    this.globalData.navTop = 50
    // 默认状态栏的高度
    this.globalData.statusBarHeight = 44
    try {
      // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
      const menuButtonObject = wx.getMenuButtonBoundingClientRect()
      // 获取系统信息
      wx.getSystemInfo({
        success: res => {
          // 解构出所需要的计算数据
          const { top = 50, height = 32 } = menuButtonObject || {top: 50, height: 32}
          const { statusBarHeight = 44, system,safeArea } = res
          /**
          * 通过右上角的胶囊按钮计算出导航条的高度
          *
          **/
          const navHeight = statusBarHeight + height + (top - statusBarHeight) * 2
          this.globalData.navHeight &