reader/pages/index/index.wxml

<navigationBar></navigationBar>
<view class="recommend">
  <!-- 头部及轮播图 -->
  <view class="header">
    <view class="headerBg"></view>
    <swiper class="swiper" autoplay circular indicator-dots indicator-active-color="#fff" indicator-color='#ecececa1'>
      <block wx:for="{{background}}" wx:key="*this">
        <swiper-item>
          <view class="swiper-item {{item}}"></view>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <!-- 滚动定位 -->
  <view class="scrollBox {{isFixed?'isFixed':''}}" style="top:{{navBarHeight}}px;">
    <!-- 一级分类区域 -->
    <scroll-view class="firstClassify" scroll-x="true">
      <view class="firstBox" wx:for="{{10}}" wx:key="index">
        <image class="icon" src="/static/header.png" mode="" />
        <view class="name">书香美文</view>
      </view>
    </scroll-view>
    <!-- 展示类型选择 -->
    <view class="selectType {{isFixed?'isFixed2':''}}" bindtap="selectType">
      <view class="type {{currentType=='1'?'currentType':''}}" data-type='1'>优秀作品展播</view>
      <view class="type {{currentType=='2'?'currentType':''}}" data-type='2'>官方推荐</view>
      <view class="type {{currentType=='3'?'currentType':''}}" data-type='3'>官方活动</view>
      <view class="search">
        <image src="/static/search.png" class="searchImg" />
      </view>
    </view>
  </view>
  <!-- 当一级分类固定定位时占位用的元素 -->
  <view class="{{isFixed?'brace':''}}" />
  <!-- 优秀作品展播及官方推荐列表组件 -->
  <worksList id="worksList" worksList="{{list}}" />
</view>