写一个最常见的小demo,小程序简单循环列表数据渲染实例。
wxml
<view class="item-box">
<view class="items">
<view wx:for="{
{list}}" wx:key="{
{index}}" class="item">
<view data-index="{
{index}}" class="inner txt">
<i>{
{item.rank}}</i>
<image class="item-icon" mode="widthFix" src="{
{item.icon}}"></image>
<i> {
{item.name}}</i>
<span class="item-data">
<i class="rankpace"> {
{item.pace}}</i>
</span>
</view>
</view>
</view>
</view>
wxss
view {
box-sizing: border-box;
}
.item-box {
width: 700rpx;
margin: 0 auto;
padding: 40rpx 0;
}
.items {
wi