32. WeChat applet (component - form: button)

WeChat Mini Program (Component – ​​Form: Button)

(1) button button component

button button attribute button


size size attribute value

View the source code, analyze the default style of button and the small size button


, so it can be analyzed that the border of the button button is set by the pseudo-element button:after.
Therefore, if you want to remove the default border of the applet button, setting border:none for the button is invalid, and you can only remove the default border through pseudo-elements.

View the source code, small size button button style attribute


button type style type


whether the button plain is hollowed out whether


the button is disabled whether the button

displays the loading icon

analyze the button to display the loading icon source code

::before implements the loading style, ::after implements the basic style of the button (solve 1px adaptation Question)
Button WeChat openability

The WeChat applet has opened many ports to realize various functions, such as customer service conversation, forwarding, obtaining user information and mobile phone number, authorization page, feedback, etc.

open-type — Commonly used attribute values ​​for WeChat’s open capabilities. For space issues, see the
button button hover class attribute in the next section for
details. Comparison:
①view view component hover-start-time defaults to 50, hover-stay-time defaults to 400
②navigator navigation component hover-start- time defaults to 50, hover-stay-time defaults to 600

form-type triggers form submit/reset action
form-type attribute value

If you have any questions or questions, please leave a message to contact the editor! ! ! !

Thanks for visiting! ! !