This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

This record below, small program commonly used components, just started to learn easy to forget

Official detailed documents there are many official documents are very detailed, here is the video involved

1. view

Similar to the original div tag

Special properties, it looks like the properties are all related to the click

2. text

  1. Text labels

  2. Only text can be nested

  3. Long press text to copy (only this label has this capability)

  4. You can encode Spaces, carriage returns, and so on

3. image

  1. Image label
  2. The default width and height are 320 by 240 px
  3. Support lazy loading

There are a lot of ways to do this, but I can’t remember it

Because the size of wechat small program is limited, so consider the use of outside the chain of the way to use pictures

4. swiper

Rotation diagram component

The function of the rowhead diagram can be configured

A simple wheel – cast diagram effect is achieved

The default width is 100% and the default height is 150px

Common configuration properties used to control loops, joins, etc

Each round item is wrapped with a swiper-item tag

5. navigator

Navigation component, similar to a tag

The open – type valid values

Note the rules of jumping here, some cannot jump to the Tabbar page, be careful!

6. rich-text

Rich text tags that can be parsed into corresponding tags

<rich-text nodes="{{html}}" bindtap="tap"></rich-text>
Copy the code

The data transfer

data: {
    html: "123"
}
Copy the code

Add fields to data to add content to rich text.

I can parse the tag, but I can’t copy it, so I can’t try ~~

7. button

There’s a lot of configuration properties, so let’s just go to the documentation, the documentation

Button to demonstrate

The open button function can have some high operations

<button open-type="getUserInfo">Obtaining user Information</button>
Copy the code

8. icon

Icon label

<icon type="success" size="40" ></icon>
Copy the code

9. radio

Radio tag, you can change the color through the color attribute

It can be used with radio-group to realize radio selection function

10. checkbox

Check boxes can be changed with the color property, much like radio buttons