pk10赛车计划软件百度云

Fuzhou website construction only needs 1,000 yuan to include domain name space, details 18558752805

  • Use of WeChat Mini Program wx: key

Fuzhou Website Construction > Site News > WeChat Mini Program >

http://www.sohu.com/a/207728111_99897596

If the position of the items in the list will change dynamically or 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 input, selected state of switch), you need to use wx: key to specify a unique identifier for the item in the list.

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

In the development process, the role of wx: key is very important for the project. If you cannot understand the children's shoes from the text, you can go to the github clone demo to WeChat development tools and experience it for yourself.

wx: key values are provided in two forms

A string representing a property of the item in the array of the for loop. The value of the property must be the only string or number in the list, and cannot be changed dynamically.

The reserved keyword * this represents the item itself in the for loop. This representation requires that the item itself be a unique string or number, such as:

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

If wx: key is not provided, a warning will be reported. If you know the list is static or you don't need to pay attention to its order, you can choose to ignore it.

We see this animated GIF. Here is a switch on state. The state of the switch is under the title Lamb Ribs. When adding data to this array, the state of this switch does not follow a Lamb Ribs. Keep yourself in shape.

Let's look at another example, using the wx: key unique identifier.

This animated GIF is also the state of the switch when clicked. The only difference is that when adding data, it maintains its own state.

I believe that through these two small examples, you should also know about the unique identifier of wx: key. If you want to improve the technology, you must toss more. In the applet, write wx: for and wx: key to realize it.

One more thing to note, let's first look at the following code

<view class = "pad10" wx: for = "{{twoList}}" wx: key = "id">

</ view>

wx: key = "id", we see that the value in wx: key does not need curly braces, yes, here is a special place, no curly braces are needed, and no parameter name is needed. A field name

Scan QR code to share on WeChat
confirm

Copyright © 2014-2019 buxie520.com Fuzhou website production