1. 程式人生 > >小程式 獲取前幾名加樣式

小程式 獲取前幾名加樣式

很多網站的新聞,前幾條訊息都不同顏色來展示,來突出。

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

  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

如圖: