小程式 獲取前幾名加樣式
阿新 • • 發佈:2018-12-22
很多網站的新聞,前幾條訊息都不同顏色來展示,來突出。
樣式按照自已想法寫,我這裡就沒有貼出來
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 Code> <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>
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
如圖: