小程序 獲取前幾名加樣式

不少網站的新聞，前幾條消息都不一樣顏色來展現，來突出。

樣式按照自已想法寫，我這裏就沒有貼出來

　　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

如圖：