微信小程序电商实战-你所困扰的自定义顶部导航栏都在这里

本文章是一个系列文章，以一个完整的可用于生产的实际项目探索微信小程序开发中我们经常会遇到的问题，希望能提供完美的解决方案，这次是本系列文章的第二篇了，一下列出该系列文章链接。

微信小程序及h5，基于taro，zoro最佳实践探索?
微信小程序电商实战-解决你的登陆难问题

微信自6.6.0版本之后提供了自定义底部导航栏的功能，这使得我们的全屏页面设计成为了可能?
首先演示下最终的实现效果

我们实现了一个与微信之前的导航栏行为基本一致，样式可自定义的导航栏，接下来让我们一步一步实现它，这里主要需要考虑如下几点

不同的手机，状态栏高度不同，需要进行相关适配?
当开启小程序下拉刷新时，如何让顶部导航不会跟着下拉?
自定义导航栏封装成独立组件，实现仅需引入到页面，无需对页面样式做相关适配工作

该项目托管于github，有兴趣的可以直接查看源码，weapp-clover，如何运行项目源码请查看ztaro?
要想实现自定义导航，首先我们需要配置navigationStyle为custom(src/app.js)

config = {
    navigationStyle 'custom'
}

再实际情况中，我们往往需要对自定义导航进行各种各样的定制化，因此我们希望，封装一个最基本的导航栏，用于解决适配问题，其他样式的导航栏仅需对其进行二次封装，无需在关心适配问题，对于这个项目，我们封装组件如下：?
ComponentBaseNavigation 导航栏基本组件，用于解决适配问题?
ComponentHomeNavigation 引入基本导航组件，定制化首页导航栏组件?
ComponentCommonNavigation 引入基本导航组件，定制化其他页面导航组件

ComponentBaseNavigation实现

对于适配不通手机顶部的状态栏高度，我们需要利用微信wx.getSystemInfo获取状态栏的高度，因此在user model中新增如下代码(src/models/user.js)

// 省略其他无关代码
import Taro from'@tarojs/taro'

  namespace'user',

],

    systemInfo{},

    // 新增初始化获取用户手机系统相关信息，存储到redux全局状态中
      put type'update' payload{ systemInfo }}),
}
实现组件逻辑(src/components/base/navigation/navigation.js)







@connect(({ user =>({
  statusBarHeight usersystemInfostatusBarHeightclassComponentBaseNavigationextendsstatic defaultProps     color'white'  render(){


      paddingTop`${statusBarHeight}px`      backgroundColor

      < className="navigation">
          {propschildren}
"placeholder"/>
)
export default ComponentBaseNavigation


// 大写的PX单位是为了告诉Taro，不要转换成单位rpx
// 因此采用PX单位
height32PX// 胶囊的高度
$navigation $capsulepadding *2+;
icon25PX;
navigation   position relative;

    positionfixed    top0    left    display flex;
    justifycontent center;
    height $navigation;
    font}

}

 onSearch props
ComponentBaseNavigation>
Image"logo" src"@oss/logo.png"/>
            "icon iconfont icon-search"/>
>
>

引入导航组件到首页中,省略样式代码(src/pages/home/home.js)





'../../components/home/navigation/navigation'



    enablePullDownRefreshtrue}
    __TAB_PAGE__// eslint-disable-line
brandgetHotBrandList()
      dispatcher(),0);">])
catch)
})
"home"/>
/>
/>
PageHome

    canBackfalse// 获取当前页面是否需要返回键
setState})
})
state
classNames('navigation' padding!canBack })}>
                className"iconfont icon-arrow-left back"
View
              onClickhandleGoHome"title">{title}</)
ComponentCommonNavigation