Shulou(Shulou.com)06/01 Report--

This article mainly introduces WeChat Mini Programs how to use wx:for control properties to bind an array on components, which is very detailed and has a certain reference value. Interested friends must read it!

Wx:for

Use the wx:for control property to bind an array on a component, and you can repeatedly render the component with the data of the items in the array.

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

{{index}}: {{item.message}} Page ({data: {array: [{message: 'foo',}, {message:' bar'}]})

Use wx:for-item to specify the variable name of the current element of the array

Use wx:for-index to specify the variable name of the current subscript of the array:

{{idx}}: {{itemName.message}}

Wx:for can also be nested, below is a ninety-nine multiplication table

{{I}} * {{j}} = {{I * j}} block wx:for

Similar to block wx:if, you can also use wx:for on labels to render a building block that contains multiple nodes. For example:

{{index}}: {{item}} wx:key

If the location of items in the list changes dynamically or if new items are added to the list, and you want the items in the list to maintain their own characteristics and status (such as input in, selected status), you need to use wx:key to specify the unique identifier of the item in the list.

The value of wx:key is provided in two forms

A string that represents a property of item in the array of the for loop. The value of the property needs to be a unique string or number in the list and cannot be changed dynamically.

The reserved keyword * this represents the item itself in the for loop, which requires that the item itself is a unique string or number, such as:

When data changes trigger render layer re-rendering, components with key are corrected, and the framework ensures that they are reordered rather than recreated to ensure that the components maintain their own state and improve the efficiency of list rendering.

If you do not provide a wx:key, you will report a warning, and if you clearly know that the list is static, or do not have to worry about its order, you can choose to ignore it.

Sample code:

{{item.id}} Switch Add to the front {{item}} Add to the front 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.lengthfor (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.lengththis.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 value of wx:for is a string, the string is parsed into an array of strings

{{item}}

Equivalent to

{{item}}

Note: if there is a space between curly braces and quotation marks, it will eventually be parsed into a string

{{item}}

Equivalent to

{{item}} above is all the contents of the article "how to bind an array with wx:for control properties on components in WeChat Mini Programs". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.