微信小程序之for循环

时间:2018-04-09 13:06:34   收藏:0   阅读:14163

在微信小程序中也有for循环,用于进行列表渲染。

官方实例

打开卫星开发者文档,在框架部分的视图层--》wxml--》列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关说明。

默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item;使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名。

test.wxml

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</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}}: {{itemName.message}}
</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}}: {{item.message}}
</view>

上面两中方式的完整代码如下:

test.wxml

<view wx:for="{{array}}" id="{{index}}" bindtap=‘toindex‘>
  {{index}}: {{item.message}}
</view>
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName" id="{{idx}}" bindtap=‘toindex‘>
  {{idx}}: {{itemName.message}}
</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: [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周天‘],
  }
})

技术分享图片

 

 

 

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!