小程序 获取前几名加样式

很多网站的新闻，前几条消息都不同颜色来展示，来突出。

样式按照自已想法写，我这里就没有贴出来

　　wxml主要代码

    <block wx:for="{{ranking}}" wx:for-index="index">
        <view class=\'ranking\' style=\'border-bottom: 1rpx solid silver;\'>
          <view class=\'ranking-view\'>
              <view class=\'ranking-font\'>     
                <view class=\'first\' wx:if=\'{{index === 0}}\'>
                  <image src=\'../../../image/jiang.png\'></image>
                </view>
                <view class=\'second\' wx:elif=\'{{index === 1}}\'> 
                  <image src=\'../../../image/jiang1.png\'></image>
                </view>
                <view class=\'third\' wx:elif=\'{{index === 2}}\'> 
                   <image src=\'../../../image/jiang2.png\'></image>
                </view>
                <view class=\'list-id\' wx:else >{{item.num}}</view>
              </view>
              <view class=\'ranking-font\'>
                <view class=\'first\' wx:if=\'{{index === 0}}\'>{{item.name}}</view>
                <view class=\'second\' wx:elif=\'{{index === 1}}\'>{{item.name}}</view>
                <view class=\'third\' wx:elif=\'{{index === 2}}\'>{{item.name}}</view>
                <view class=\'list-id\' wx:else >{{item.name}}</view>
              </view>
              <view class=\'ranking-font\'>              
               <view class=\'first\' wx:if=\'{{index === 0}}\'>{{item.integral}}</view>
                <view class=\'second\' wx:elif=\'{{index === 1}}\'>{{item.integral}}</view>
                <view class=\'third\' wx:elif=\'{{index === 2}}\'>{{item.integral}}</view>
                <view class=\'list-id\' wx:else >{{item.integral}}</view>
              </view>
          </view>
        </view>
     </block>

View Code

　　js 模拟数据

ranking: [
      {
        num: \'1\',
        name: \'李珊珊\',
        integral: \'800\',
      },
      {
        num: \'2\',
        name: \'余文\',
        integral: \'562\',
      },
      {
        num: \'3\',
        name: \'高富帅\',
        integral: \'450\',
      },
      {
        num: \'4\',
        name: \'李冰冰\',
        integral: \'130\',
      },
      {
        num: \'5\',
        name: \'紫罗兰\',
        integral: \'125\',
      },
      {
        num: \'6\',
        name: \'张丽丽\',
        integral: \'120\',
      },
      {
        num: \'7\',
        name: \'联欢会\',
        integral: \'110\',
      },
      {
        num: \'8\',
        name: \'张算法\',
        integral: \'100\',
      },

   
  
    ],

View Code

如图：