reader/pages/match/index.wxml

<wxs src="../../utils/filter.wxs" module="filters" />
<view class="matchBox">
  <image src="" class="headerImg" />
  <view class="modelText">
    <view class="header">
      <image src="/static/modelBg.png" class="bg" />
      <view class="text">一年级 朗读范文素材</view>
    </view>
    <view class="tips">
      选择下面范文进行朗读
    </view>
    <swiper class="swiper" autoplay circular indicator-dots previous-margin='36px' next-margin='20px'
      indicator-active-color="#7ACAFF" indicator-color='#BABABA'>
      <block wx:for="{{bannerList}}" wx:key="id">
        <swiper-item bindtap='bannelEvent'>
          <image src="{{item.url}}" class="swiper-item" mode="" />
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="rankList">
    <view class="switchBtns" bindtap="selectType">
      <view class="switchBtn {{currentType?'currentBtn currentBtn-l':''}}" data-type='true'>人气榜TOP100</view>
      <view class="switchBtn {{!currentType?'currentBtn currentBtn-r':''}}" data-type='false'>我的参赛作品</view>
    </view>
    <view class="table">
      <view class="titleLine">
        <view class="colTitle">排名</view>
        <view class="colTitle">名称</view>
        <view class="colTitle">人气值</view>
      </view>
      <view class="contentBox" wx:for="{{10}}" wx:key="index">
        <view class="firstCol">
          <image src="/static/1-1.png" class="rankingImg" wx:if="{{index<3}}" />
          <text wx:else>{{index+1}}</text>
        </view>
        <view class="secondCol">
          <image src="https://p3-passport.byteimg.com/img/mosaic-legacy/3793/3131589739~100x100.awebp" class="avatar" />
          <view class="userInfo">
            <view class="nickName">尼赫鲁吧唧布</view>
            <view class="date">
              <view>
                <image src="/static/f.png" class="icon" />
                <view class="num">{{filters.numFilter(10)}}</view>
              </view>
              <view>
                <image src="/static/p.png" class="icon" />
                <view class="num">{{filters.numFilter(10)}}</view>
              </view>
              <view>
                <image src="/static/d.png" class="icon" />
                <view class="num">{{filters.numFilter(10130)}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="threeCol">
          <image src="/static/hot.png" class="icon" />
          <view class="num">{{filters.numFilter(12310)}}</view>
        </view>
      </view>
    </view>
  </view>
</view>