微信小程式wx:for迴圈
列表渲染
wx:for
在元件上使用 wx:for
控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲染該元件。
預設陣列的當前項的下標變數名預設為 index
,陣列當前項的變數名預設為 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item
可以指定陣列當前元素的變數名,
使用 wx:for-index
可以指定陣列當前下標的變數名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
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="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view >
</block>
wx:key
如果列表中專案的位置會動態改變或者有新的專案新增到列表中,並且希望列表中的專案保持自己的特徵和狀態(如 <input/>
中的輸入內容,<switch/>
的選中狀態),需要使用 wx:key
來指定列表中專案的唯一的識別符號。
wx:key
的值以兩種形式提供
- 字串,代表在 for 迴圈的 array 中 item 的某個 property,該 property 的值需要是列表中唯一的字串或數字,且不能動態改變。
- 保留關鍵字
*this
代表在 for 迴圈中的 item 本身,這種表示需要 item 本身是一個唯一的字串或者數字,如:
當資料改變觸發渲染層重新渲染的時候,會校正帶有 key 的元件,框架會確保他們被重新排序,而不是重新建立,以確保使元件保持自身的狀態,並且提高列表渲染時的效率。
如不提供 wx:key
,會報一個 warning
, 如果明確知道該列表是靜態,或者不必關注其順序,可以選擇忽略。
示例程式碼:
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
data: {
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3, 4]
},
switch: function(e) {
const length = this.data.objectArray.length
for (let i = 0; i < length; ++i) {
const x = Math.floor(Math.random() * length)
const y = Math.floor(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = temp
}
this.setData({
objectArray: this.data.objectArray
})
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
numberArray: this.data.numberArray
})
}
})
注意:
當 wx:for
的值為字串時,會將字串解析成字串陣列
<view wx:for="array">
{{item}}
</view>
等同於
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
注意: 花括號和引號之間如果有空格,將最終被解析成為字串
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
等同於
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>
相關推薦
微信小程式wx:for迴圈列表渲染
列表渲染 wx:for 在元件上使用 wx:for 控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲染該元件。 預設陣列的當前項的下標變數名預設為 index,陣列當前項的變數名預設為 item <view wx:for="{{array}}">
微信小程式wx:for 迴圈中item的keng
用wx:for迴圈時,會拿到一個item,即迴圈的每一項,假設List中的一個欄位為"first",且此時需要用wx:if=”{{item.first}}“判斷是否渲染,這種寫法是沒有問題的。但是如果List中的一個欄位為"1first",且此時需要用wx:if=”{{item.first}}“判斷是否渲染,
微信小程式wx:for迴圈
列表渲染 wx:for 在元件上使用 wx:for 控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲染該元件。 預設陣列的當前項的下標變數名預設為 index,陣列當前項的變數名預設為 item <view wx:for="{{array}}"> {{i
微信小程式wx:for和wx:for-item的區別
wx:for="{{list}}"用來迴圈陣列,而list即為陣列名wx:for-item="items" 即用來定義一個迴圈過程中每個元素的變數的 如果是一維陣列,按照如下方式迴圈出來: 1 2 3 <view wx
微信小程式wx:for和wx:for-item的正確用法
wx:for="{{list}}"用來迴圈陣列,而list即為陣列名wx:for-item="items" 即用來定義一個迴圈過程中每個元素的變數的 如果是一維陣列,按照如下方式迴圈出來: <view wx:for="{{list}}"> {{index}
【微信小程式】for迴圈對陣列進行刪除時的坑
大家一定經歷過這種需求, 把一個數組(暫且稱之為list)的長度作為迴圈條件,迴圈過程中做一些判斷,然後刪除掉list中的某一項,或者多項。如以下程式碼:let list = that.data.lis
微信小程式 wx:key 高階列表迴圈
讓我們先看看程式碼 .wxml 程式碼 <block wx:for="{{items}}"> <label><checkbox />{{item.title}}</label></block><bu
微信小程式wx:for給每一個元素加事件,並獲取元素內容
首先是wxml <view class='js'> <view wx:for="{{adressMessages}}">/*這裡是元素的內容*/ <text class='diming'>{{it
坑:微信小程式wx.request和wx.uploadFile中傳引數的區別
微信小程式中通過元件<form>提交表單的時候,在js中通過e.detail.value得到所提交表單的json格式資料。一般提交表單我們都是通過wx.request請求,提交表單資料,通過引數data傳資料, wx.request({ url: 'test.php', //僅為示例,
微信小程式wx.request踩坑記錄
一:header['content-type'] 為 application/json 的資料 前端 wx.request({ url: apiUrl, //替換成自己的伺服器地址 data: {
微信小程式 wx.request wepy 簡單封裝
本文出自: http://blog.csdn.net/wyk304443164 很簡單 import sha1 from './sha1' // sign // 簽名 function sign (signObj = {}) { ... // 自行加密
微信小程式wx.redirectTo、wx.navigateTo跳轉失敗
在開發小程式時,用到下面三種頁面跳轉方法,路徑寫對後跳轉沒有反應,也沒報錯。 wx.navigateTo(OBJECT) 保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。 wx.redirectTo(OBJECT) 關閉當前頁面,跳轉
微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子
微信小程式 wx.reLaunch 執行前幾個頁面的 onUnload 鉤子 解決方案 有種場景:頁面 A => B => C => D, 當在 C 頁面呼叫 wx.reLaunch({url:’/pages/D’}) 時,頁面 A 、B、C 的 onUnloa
微信小程式實現給迴圈列表點選新增類(單項和多項)
在微信小程式裡面沒有DOM物件, 不能操作DOM. 所有的操作通過資料來實現,下面主要實現了給迴圈列表點選新增類的操作 一、單項 目標需求:實現下圖,給點選的view增加類,每次只能選擇一個。 主要思路:給點選的view增加類,
微信小程式 巢狀迴圈
前言 入門教程之列表渲染多層巢狀迴圈,目前官方的文件裡,主要是一維陣列列表渲染的案例,還是比較簡單單一,給剛入門的童鞋還是無從入手的感覺。 <view wx:for="{{items}}"> {{index}}: {{item.message}} </view> 還有一個九
微信小程式wx.login登陸+php
wxml: <button bindtap='login'>登入</button> js: //登入獲取code login: function () {
微信小程式wx.uploadFile的兩個坑
setImage:function(e){ var _this = this //坑1 wx.chooseImage({ count: 1, sizeType: [‘original’, ‘compressed’], sourceType: [‘album’, ‘camera’], success: fun
微信小程式wx.request()封裝
微信小程式開發過程中,請求用的次數是比較多的,那麼能自己每次的重複程式碼太多,所以還是自己封裝一個請求吧,使程式碼越來越精簡。 現在請求分為兩種一種是GET一種是POST,在微信小程式的請求中POST請求的header中的'content-type'為'applicati
微信小程式wx.getUserInfo方法獲取的使用者資訊為英文字母
我們在開發微信小程式的時候會發現用wx.getUserInfo方法獲取到的使用者國家、省份、城市等資訊都是英文字母,要想獲取中文資訊,您只需在wx.getUserInfo中加上 lang:"zh_CN"這條語句就可以,如下圖所示:
微信小程式wx.uploadFile(上傳檔案)PHP伺服器獲取formData的資料
例如下面的程式碼是微信小程式上傳圖片的程式碼: wx.chooseImage({ success: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({