reader/components/navigationBar/index.wxml

<!-- 自定义顶部栏 -->
<block wx:if="{{showNav}}">
  <view class="nav-bar" style="height:{{navBarHeight}}px;">
    <view class="view" style="height:{{menuHeight}}px;top:{{menuTop}}px;">
      <view class="selectGrade" bindtap="showGrade">{{userInfo.gradeName}}</view>
      <view class="title">{{title}}</view>
    </view>
  </view>
  <!-- 
  内容区域：
  自定义顶部栏用的fixed定位，会遮盖到下面内容，注意设置好间距
-->
  <view class="content" style="margin-top:{{navBarHeight}}px;"></view>
  <view class="headerBg" style="top:{{navBarHeight}}px;"></view>
</block>

<view wx:if="{{isGradeShow}}" class="gradeContainer" catchtouchmove='true'
  style="margin-top:{{showNav?navBarHeight:0}}px;" bindtap="closeGrade">
  <view class="gradeBox" catchtap="selectGrade">
    <view class="title">请选择年级</view>
    <view class="content">
      <view class="grade oneRow {{temporaryGrade=='PRESCHOOL'?'check':''}}" data-code="PRESCHOOL">学前班</view>
    </view>
    <view class="content">
      <view class="grade {{temporaryGrade=='PRIMARY_FIRST_GRADE'?'check':''}}" data-code="PRIMARY_FIRST_GRADE">一年级
      </view>
      <view class="grade {{temporaryGrade=='PRIMARY_SECOND_GRADE'?'check':''}}" data-code="PRIMARY_SECOND_GRADE">
        二年级
      </view>
    </view>
    <view class="content">
      <view class="grade {{temporaryGrade=='PRIMARY_THREE_GRADE'?'check':''}}" data-code="PRIMARY_THREE_GRADE">三年级
      </view>
      <view class="grade {{temporaryGrade=='PRIMARY_SENIOR_GRADE'?'check':''}}" data-code="PRIMARY_SENIOR_GRADE">
        四年级
      </view>
    </view>
    <view class="content">
      <view class="grade {{temporaryGrade=='PRIMARY_FIVE_GRADE'?'check':''}}" data-code="PRIMARY_FIVE_GRADE">五年级
      </view>
      <view class="grade {{temporaryGrade=='PRIMARY_SIX_GRADE'?'check':''}}" data-code="PRIMARY_SIX_GRADE">
        六年级
      </view>
    </view>
    <view class="submitBox">
      <button class="resetBtn submit" bindtap="changeGrade">确定</button>
    </view>
  </view>
</view>