圖片代碼請看案例

一.知識點

(一)列表渲染 wx:for

tip:wx:for=“array”可以等于參數(shù)名，在js中調(diào)用
Page({ data:{
array: [{name: '小李'},{ name: '小高'}]}
})，獲取值；也可以直接把wx:for="{{[1, 2, 3]}}"，把值放在上面

• 1.在組件上使用wx:for控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復渲染該組件。

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

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

var app = getApp()
Page({
    data:{
      items: [{
        message: 'foo',
      },{
        message: 'bar'
      }]
    }
})

首先在wxml文件中wx:for后面的雙重大括號中的items是一個數(shù)組，數(shù)組的元素如js中所見，在wx:for下面{{index}}:{{item.arry}}中index是items數(shù)組的下標，item.arry是數(shù)組中的元素也即是“a”和“b”

• 2.使用wx:for-item可以指定數(shù)組當前元素的變量名。使用wx:for-index可以指定數(shù)組當前下標的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.name}}
</view>

• 3.wx:for也可以嵌套

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
    <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
        <view wx:if="{{i <= j}}">
           {{i}} * {{j}} = {{i * j}}
        </view>
    </view>
</view>

（二）.block wx:for

類似block wx:if，也可以將wx:for用在<block/>標簽上，以渲染一個包含多節(jié)點的結構塊。

<block wx:for="{{array}}">
  <view> {{index}}:{{item.name}}</view>
</block>

(三).wx:key

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

字符串，代表在 for 循環(huán)的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。
保留關鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數(shù)字，如：
如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態(tài)，或者不必關注其順序，可以選擇忽略。

案例：上圖

wxml:

<view class='top'>充值中心</view>
<view class='row'>
  <block wx:for="{{mydata}}" >
    <view class="item {{index == currentIndex ? 'active' : ''}}" bindtap='itemClick' id='{{index}}'  >
      <text  >{{item.name}}</text>
    </view>
  </block>
</view>

<view class="tool-bar">
  <view>
    <view class='bar-money'>
      <text class="bar-money-1"> 金額:</text>
      <text class="bar-money-2"> ￥{{price}}</text>
    </view>
    <view class='button-view'>
       <a  class="pay-button"> 立刻支付 </a>
    </view>
 
  </view>

</view>

wcss

.top {
  width: 100%;
  height: 150rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eee;
  color: #09a6d9;
  font-size: 40rpx;
}

.row {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.item {
  display: flex;
  height: 200rpx;
  width: 33.333%;
  float: left;
  justify-content: center;
  align-items: center;
}

.item text {
  width: 80%;
  height: 80%;
  display: flex;
  color: #36ab60;
  justify-content: center;
  align-items: center;
  background: white;
  font-size: 50rpx;
  border-radius: 5px;
  box-shadow: #ddd 0px 2px 2px 1px;
}

.item.active text {
  background: #eee;
}

.tool-bar {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0;
  background-color: #f2f2f2;
  overflow: hidden;
}

.bar-money {
  float: right;
  margin: 10px;
}

.bar-money-2 {
  color: red;
  font-size: 50rpx;
  margin-left: 5px;
}

/* 按鈕樣式 */

.button-view {
  width: 100%;
  height: auto;
}

.pay-button {
  height: 100rpx;
  margin-bottom: 10px;
  margin-top: 50px;
  margin-left: 3%;
  margin-right: 3%;
  width: 94%;
  background-color: #09a6d9;
  border-radius: 5px;
  border: 1px solid #19abab;
  display: flex;
  color: #fff;
  font-size: 35rpx;
  align-items: center;
  justify-content: center;
}

.pay-button:hover {
  background-color: #09a6d9;
}

.pay-button:active {
  position: relative;
  top: 1rpx;
  border-radius: 5px;
  background-color: #09a6d9;
}

js :

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    mydata: [{
        "id": 1,
        "name": "1M",
        "price": 5.9
      },
      {
        "id": 1,
        "name": "10M",
        "price": 9.9
      }, {
        "id": 2,
        "name": "30M",
        "price": 10
      },
      {
        "id": 3,
        "name": "50M",
        "price": 20
      }, {
        "id": 4,
        "name": "1G",
        "price": 30
      }, {
        "id": 5,
        "name": "2G",
        "price": 60
      }, {
        "id": 6,
        "name": "5G",
        "price": 80.8
      },
      {
        "id": 7,
        "name": "10G",
        "price": 90
      }
    ],
    index: 0,//當前索引
    price: 5.9,
    currentIndex:0,//記錄當前選中數(shù)據(jù)
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function(options) {

  },
  //點擊事件
  itemClick: function(res) {
    console.log("index-->" + res.currentTarget.id);
    var position = res.currentTarget.id;

    this.setData({

      price: this.data.mydata[position].price,
      currentIndex:position,

    })
  }
})