碼迷,mamicode.com
首頁 > 微信 > 詳細

微信小程序之for循環

時間:2018-04-09 13:06:34      閱讀:7619      評論:0      收藏:0      [點我收藏+]

標簽:輸出   color   img   tar   打開   效果   class   選擇   console   

在微信小程序中也有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: [‘周一‘,‘周二‘,‘周三‘,‘周四‘,‘周五‘,‘周六‘,‘周天‘],
  }
})

技術分享圖片

 

 

 

微信小程序之for循環

標簽:輸出   color   img   tar   打開   效果   class   選擇   console   

原文地址:https://www.cnblogs.com/yuyujuan/p/8758892.html

(0)
(1)
   
舉報
評論 一句話評論(0
登錄后才能評論!
? 2014 mamicode.com 版權所有 京ICP備13008772號-2
迷上了代碼!
河北十一选五基本走势