标签：rop const 钻石 使用数组 页面 样式 ges style color
微信小程序wx:for列表渲染设置不同样式（冠军、亚军、季军、顺序排名）
使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件；
使用 wx:for-item 指定数组当前元素的变量名；
使用 wx:for-index 指定数组当前下标的变量名；
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
*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>
<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 () {
}
})
页面如图
标签：rop const 钻石 使用数组 页面 样式 ges style color
原文地址：https://www.cnblogs.com/cdj61/p/9146763.html
