页面显示效果

前端的美化功底还有得提高哈哈哈

前端代码

<view class='container'>

  <!-- tab导航栏 -->
  <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
    <block wx:for="{{categoryMenuI}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx">

      <view class="nav-item {{currentTab == idx ?'active':''}}" data-value='{{navItem.value}}' data-current="{{idx}}" bindtap="switchNav">
        <text>{{navItem.label}}</text>
      </view>
    </block>
  </scroll-view>
  <!-- 页面内容 -->
    <!-- 左边的  -->
    <scroll-view class='nav_left' scroll-y='true'>
      <block wx:for="{{categoryMenuILeft}}" wx:key="{{index}}">
        <view style="background:#b9b9b9;" hover-class="hover-color" class="nav_left_items {{leftCur==index?'active':''}}" bindtap="switchLeftTab" data-value='{{item.value}}' data-index='{{index}}'>
          {{item.label}}</view>
      </block>
    </scroll-view>
    <!-- 右边的 -->
    <scroll-view class="nav_right" scroll-y="true">
      <view class="{{topx}}">
        <block wx:for="{{categoryMenuIRight}}" wx:key="index">
          <navigator url="/pages/classification/classification?categoryId={{item.value}}&categoryName={{item.label}}">
            <view class="nav_right_items" data-index='{{index}}' data-value='{{item.value}}' bindtap="switchRightTab">
              <image src="{{item.categoryImage}}"></image>
              <text>{{item.label}}</text>
            </view>
          </navigator>
        </block>
      </view>
    </scroll-view>
</view>