taro 自定义导航栏

第一步： index.config 文件设置 navigationStyle: "custom"

第二步： 引入自定义导航栏组件,该组件样式需要固定定位,top设置0

第三步：监听下拉动作，修改isToggleTitle状态

onPageScroll(e) {
    titleTimer && clearTimeout(titleTimer);
    const titleTimer = setTimeout(() => {
      if (e.scrollTop > 0) {
        this.setState({
          isToggleTitle: true
        });
      } else if (e.scrollTop === 0) {
        this.setState({
          isToggleTitle: false
        });
      }
    }, 0);
  }

第四步：导航栏组件根据isToggleTitle显示不同的样式

例如：


<NavBar
   title="这里是title"
   bg={isToggleTitle ? "#fff" : "transparent"}
   color={isToggleTitle ? "#000" : "#fff"}
   isAnimation={isToggleTitle} // 是否需要过渡动画
></NavBar>