小程序列表渲染條件判斷

列表渲染設置不同樣式（冠軍、亞軍、季軍、順序排名）

使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件；

使用 wx:for-item 指定數組當前元素的變量名；

使用 wx:for-index 指定數組當前下標的變量名；

默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item

wx:key

---

如果列表中項目的位置會動態改變或者有新的項目添加到列表中，並且希望列表中的項目保持自己的特征和狀態（如 <input/> 中的輸入內容，<switch/> 的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

wx:key 的值以兩種形式提供

1. 字符串，代表在 for 循環的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數字，且不能動態改變。
2. 保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數字，如：

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，並且提高列表渲染時的效率。

如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。亦可添加 wx:key="unique"屬性

 

（ for循環列表  添加key鍵 wx:key="unique"   條件判斷if  elif  else   索引值加1{{idx+1}} ）

多個共用相同樣式：<text wx:if="{{idx==0||idx==1||idx==2}}">{{idx+1}}</text

未簡化寫法：<text wx:if="{{idx!==0&&idx!==1&&idx!==2}}">{{idx+1}}</text>

簡化寫法：<text wx:else>{{idx+1}}</text> 前提多個條件渲染時使用wx:if--wx:elif--wx:elif--wx:else

<view class="content-box" wx:for="{{list}}" wx:for-index="idx" wx:key="unique" wx:for-item="itemList">
      <view class="listNum">
        <image wx:if="{{idx==0}}" src="../../images/icon/num1.png" class="icon"></image>
        <image wx:elif="{{idx==1}}" src="../../images/icon/num2.png" class="icon"></image>
        <image wx:elif="{{idx==2}}" src="../../images/icon/num3.png" class="icon"></image>
        <text wx:else>{{idx+1}}</text>
      </view>
      <view class="listPic"><image src="{{itemList.pic}}"></image></view>
      <view class="listName">{{itemList.name}}</view>
      <view class="listState">{{itemList.state}}</view>
    </view>

數據data

//index.js
Page({
  data: {
    listtishi: "您的最新排名會在每天0：00更新哦~",
    listIcon:'../../images/icon/iconStar.png',
    list:[
        {
        "pic":"../../images/person.png",
        "name":'珂蘭鑽石王',
        "state":122,
        "ranking":"1"
      },{
        "pic": "../../images/person.png",
        "name": '草上飛',
        "state": 789,
        "ranking": "2"
      }, {
        "pic": "../../images/person.png",
        "name": '天空之城',
        "state": 121,
        "ranking": "3"
      }, {
        "pic": "../../images/person.png",
        "name": '旅行者',
        "state": 686,
        "ranking": "4"
      }, {
        "pic": "../../images/person.png",
        "name": 'TYD',
        "state": 62086,
        "ranking": "4"
      }
    ]
  },
  onLoad: function () {

  }
})

 效果如圖