图片代码请看案例
一.知识点
(一)列表渲染 wx:for
tip:wx:for=“array”可以等于参数名，在js中调用
Page({ data:{
array: [{name: '小李'},{ name: '小高'}]}
})，获取值；也可以直接把wx:for="{{[1, 2, 3]}}"，把值放在上面
- 1.在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item
<view wx:for="{{items}}">
{{index}}: {{item.message}}
</view>
var app = getApp()
Page({
data:{
items: [{
message: 'foo',
},{
message: 'bar'
}]
}
})
首先在wxml文件中wx:for后面的双重大括号中的items是一个数组，数组的元素如js中所见，在wx:for下面{{index}}:{{item.arry}}中index是items数组的下标，item.arry是数组中的元素也即是“a”和“b”
- 2.使用wx:for-item可以指定数组当前元素的变量名。使用wx:for-index可以指定数组当前下标的变量名：
<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/>标签上，以渲染一个包含多节点的结构块。
<block wx:for="{{array}}">
<view> {{index}}:{{item.name}}</view>
</block>
(三).wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
案例：上图
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({
/**
* 页面的初始数据
*/
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,//记录当前选中数据
},
/**
* 生命周期函数--监听页面加载
*/
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,
})
}
})
