⼩程序之for循环
在⼩程序中也有for循环，⽤于进⾏列表渲染。
官⽅实例
打开开发者⽂档，在框架部分的视图层--》wxml--》列表渲染中可以看到官⽅给出的for循环实例，在实例中可以看到下⾯相关说明。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item；使⽤wx:for-item可以指定数组当前元素的变量名，使⽤wx:for-index可以指定数组当前下标的变量名。
test.wxml
<view wx:for="{{array}}">
{{index}}: {{ssage}}
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{ssage}}
</view>
test.js
Page({
data: {
array: [
{message: 'foo',},
{message: 'bar'}
]
}
})
在上⾯的例⼦中，针对同⼀个数组，分别使⽤两种不同的⽅式，得到了相同的结果，也就是官⽹说明中指出的，index 和 wx:for-index 都可以⽤来表⽰元素下标，⽽item 和 wx:for-item 都可以⽤来表⽰元素，但在实际运⽤中，我们使⽤for循环的时候，更多的是希望可以通过点击事件获得元素的索引下标，⽽不是在列表中展⽰下标。
获取数组索引
wx:for-index ⽅式
在⼩程序中，元素也有id属性，并且可以通过点击该元素获得其id，因此，我们只需要将id与元素下标进⾏绑定，就可以通过id来获得索引下标了。
对上⾯的代码稍作修改，得到下⾯的例⼦
test.wxml
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" id="{{idx}}" bindtap='toindex'>
{{idx}}: {{ssage}}
</view>
test.js
toindex(e){
console.log(e);
var idx = parseInt(e.currentTarget.id);
}
在上⾯的介绍中，我们知道 wx:for-index可以⽤来表⽰下标，因此将 wx:for-index的值通过id进⾏绑定，通过bindtap为列表项添加点击事件，当我们点击列表项中的第⼆项时，在test.js中得到上图的打印结果，在上⾯的输出结果对象中，打印出了列表项的id值，但是⼀个字符串，因此我们需要通过parseInt将其转为整数即可。上⾯的idx就是我们需要的索引值了。
index ⽅式
在官⽹实例中指出，除了wx:for-index可以⽤来表⽰下标外，默认的下标变量名是index，因此我们也可以直接将index同id进⾏绑定，只需要更改test.wxml⽂件就可以了，这样还可以减少代码书写量。
<view wx:for="{{array}}" id="{{index}}" bindtap='toindex'>
{{index}}: {{ssage}}
</view>
上⾯两中⽅式的完整代码如下：
test.wxml
<view wx:for="{{array}}" id="{{index}}" bindtap='toindex'>
{{index}}: {{ssage}}
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" id="{{idx}}" bindtap='toindex'>
{{idx}}: {{ssage}}
</view>
test.js
Page({
data: {
array: [
{message: 'foo',},
{message: 'bar'}
]
},
toindex(e){
console.log(e)；
var idx = parseInt(e.currentTarget.id);
}
})
通过点击事件添加样式
在for循环列表中，我们通常会通过点击事件来确定当前选中项，为了突出显⽰当前选中项，会为当前选择项添加特殊样式，在⼩程序中，也可以实现这种效果。
test.wxml
<view class="test {{cur==index ? 'active' : ''}}" wx:for="{{array}}" id="{{index}}" bindtap='toindex'>
{{item}}
</view>
test.wxss
.test{
width:50px;
height:20px;
line-height: 20px;
margin: 5px auto;
font-size: 13px;
border:1px solid #7d7d7d;
border-radius: 20px;
text-align: center;
}
.test.active{
color:#ffffff;
background-color:#7d7d7d;
}
test.js
Page({
data: {
array: ['周⼀','周⼆','周三','周四','周五','周六','周天'],
cur:0
},
toindex(e){
var idx = parseInt(e.currentTarget.id);
this.setData({
cur: idx
});
}
})
在上⾯的代码中，⾸先通过⼀个变量cur表⽰当前选择项，默认为第⼀项，即下标为0的项，然后将索引同id绑定，通过点击事件获得当前项的索引，将值赋给cur，在test.wxss中，.test代表的是默认的样式，⽽.test.active则代表选择项的特殊样式。
给for循环⾥单独的view添加单独的样式
使⽤for循环是未来渲染具有相同样式的列表，但有的时候，我们由需要给for循环⾥单独的view添加单独的样式，例如在上⾯的例⼦中，每⼀个列表项的默认样式都是相同，但是现在需要将⼯作⽇和休息⽇进⾏区分，添加不同的样式，此时，我们就可以使⽤到条件渲染了，具体代码如下：
test.wxml
<view class="test" wx:for="{{array}}" >
<view class="Sat" wx:if="{{item=='周六'}}">{{item}}</view>
<view class="Sun" wx:elif="{{item=='周天'}}">{{item}}</view>
<view wx:else>{{item}}</view>
</view>
test.wxss
.test{
width:50px;
height:20px;
line-height: 20px;
margin: 5px auto;
font-size: 13px;
border:1px solid #7d7d7d;
border-radius: 20px;
text-align: center;
}
.Sat{
color:#ffffff;
border-radius: 20px;
background-color:#FF6347;
小程序 字符串转数组}
.Sun{
color:#ffffff;
border-radius: 20px;
background-color:#FF1493;
}
test.js
Page({
data: {
array: ['周⼀','周⼆','周三','周四','周五','周六','周天'],
}
})
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论