tencent cloud

Tencent Cloud Super App as a Service

Release Notes and Announcements
Announcement: Tencent Cloud Mini Program Platform Renamed to Tencent Cloud Super App as a Service on January 2, 2025
Console Updates
Android SDK Updates
iOS SDK Updates
Flutter SDK Updates
IDE Updates
Base Library Updates
Product Introduction
Overview
Strengths
Use Cases
Purchase Guide
Billing Overview
Pay-As-You-Go Billing
Renewal Guide
Service Suspension Instructions
Getting Started
Plan Management
Overview
Console Account Management
Storage Configuration
Acceleration Configuration
Branding Configurations
Platform Features
Console Login
Users and Permission System
Mini Program Management
Mini Game Management
Superapp Management
Commercialization
Platform Management
User Management
Team Management
Operations Management
Security Center
Code Integration Guide
Getting Demo and SDK
Android
iOS
Flutter
Superapp Server
GUID Generation Rules
Mini Program Development Guide
Mini Program Introduction and Development Environment
Mini Program Code Composition
Guide
Framework
Components
API
Server Backend
JS SDK
Base Library
IDE Operation Instructions
Mini Game Development Guide
Guide
API
Server Backend
Practice Tutorial
Mini Program Login Practical Tutorial
Mini Program Subscription Message Practical Tutorial
Payment Practical Tutorial
Ad Integration Practical Tutorial
Mini Game Subscription Message Practical Tutorial
API Documentation
History
Introduction
API Category
Making API Requests
Operation Management APIs
User Management APIs
Team Management APIs
Sensitive API-Related APIs
Role Management APIs
Platform Management APIs
Other Console APIs
Mini Program or Mini Game APIs
Management-Sensitive APIs
Global Domain Management APIs
Superapp APIs
Data Types
Agreements
Service Level Agreement
Data Processing and Security Agreement
SDK Privacy Policy Module
SDK Data Processing and Security Agreement Module

List Rendering

PDF
Focus Mode
Font Size
Last updated: 2025-11-28 09:51:44

wx:for

In a component, by binding an array using the wx:for control property, you can use the data of the array items to re-render this component.
The subscript variable name of the current item of the default array defaults to index, and the variable name of the current item of the array defaults to item.
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
You can use wx:for-item to specify the variable name of the array’s current element.
You can use wx:for-index to specify the variable name of the array’s current subscript:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for can also be embedded. Below is the Chinese multiplication table:
<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

Similar to block wx:if, you can use wx:for on a <block/> tag to render a structural block containing multiple nodes. For example:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

wx:key

If the positions of list items dynamically change or new items are added to the list and you want the items in the list to retain their features and statuses (such as the content input in input and the selection status of switch), you must use wx:key to specify the unique identifiers of the items in the list.
The wx:key is provided in two formats:
String: Represents a property of an item in the for loop array. The value of this property must be a unique string or number in the list and cannot dynamically change.
Reserved keyword *this: Represents the item itself in the for loop. This expresses that the item itself is a unique string or number. For example:
When a data change triggers re-rending at the rendering layer, the components that have keys are corrected. The framework ensures that they are reordered, rather than recreated. This ensures the components retain their statuses and improves the efficiency of list rendering.
If wx:key, is not provided, a warning is reported. If you know that this list is static or the order is not important, you can ignore the warning.

Sample code

<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
})
}
})

Note

When the wx:for value is a string, the string is parsed into a string array.
<view wx:for="array">
{{item}}
</view>
equivalent to
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
Note:
If there are spaces between curly brackets and quotes, the content is ultimately parsed into a string.
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
equivalent to
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>


Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback