Learning WeChat Mini Program (2)

The basic display process of the second page list made today is as follows:
first realize yesterday’s click to jump

Insert picture description here
Insert picture description here
Insert picture description here

Introduce the carousel swiper
Insert picture description here
Insert picture description here
and then use the template (because it needs to be displayed dynamically)
Insert picture description here

Here you need to introduce a template. The introduction of wxml and wxss is different.
Insert picture description here
Insert picture description here
Inserting a template is to set the name, and use is wherever you want.

List rendering (to put it plainly is traversal)
This can add an identification key and
Insert picture description here
this can traverse multiple views.
Insert picture description here
Here I want to pass the data to the template. The three-point operator is used. Because there are item and index by default, just write it like this. This means that the official document says: Use the is attribute to declare the template to be used, and then pass in the data required by the template.
The three-point operator here is equivalent to destructuring assignment, and you can directly get the attributes in the object, so you can use it directly as follows.
Example: <image src="{ {avatar}}"></image>
Insert picture description here
Here the js file imported from the outside needs to be rolled back, otherwise an error is reported, it is calculated from the current position
Insert picture description here

Effect picture

Insert picture description here
Insert picture description here
Insert picture description here

Today is relatively simple, but the WeChat development tool sometimes cannot be opened, and the screen is blank. . . . . Finally solved it, I don’t know if I will do it again in the future, it’s okay to download the 32-bit package, 64-bit seems not suitable for me

Guess you like

Origin blog.csdn.net/weixin_46013619/article/details/104657951