Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points of WeChat Mini Programs's commonly used form components, which are detailed in content and clear in logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

1. Common form components 1.1 button

   is a button component and is one of the commonly used form components for event triggering and form submission.

Code example:

7.button small case (1) Mini Button Primary Button Secondary Button warning Button (2) Button status ordinary Button Police Button load Button (3) add button event points I get user information 1.2 checkbox

   is a check box component that is often used to select multiple items of data in a form. The parent control of the check box is the parent control, and several child controls are nested within it.

Code example:

Checkbox.wxml

8.checkbox small case uses for cycle to generate {{item.value}} in batches

Checkbox.js

Page ({data: {items: [{name: "tiger", value: "tiger"}, {name: "elephant", value: "elephant"}, {name: "lion", value: "lion", checked: "true"}, {name: "penguin", value: "penguin"}, {name: "elk", value: "elk"} {name: "swan", value: "Swan"},]}, checkboxChange:function (e) {console.log ("change event occurred in checkbox Carry a value of: ", e.detail.value)}}) 1.3 input

   is an input box component that is often used to enter text (such as name, age, etc.).

9.input small case (1) text input box (2) password input box (3) disable input box (4) add event monitor 1.4 label to the input box

   is a tag component that does not have any effect, but can be used to improve the usability of form components. This control is triggered when the user clicks text within the label element, that is, when the user selects the tag, the event is passed to the form control associated with the label, which can be bound to the id using the for attribute, or the space can be placed inside the tag.

Wxml

10.lable small case (1) using for attribute tiger elephant lion (2) label package component tiger elephant lion 1.5 form

   is a form control component that is used to submit content in a form component. Multiple components can be nested within a control component.

Form.wxml

11.form small case simulation registration function username: password: mobile number: CAPTCHA: registration reset

Form.js

Page ({onSubmit (e) {console.log ("submit event occurred in form, carrying data is:") console.log (e.detail.value)}, onReset () {console.log ("reset event occurred in form, the form has been reset")})

   enters the test data and then clicks the registration button to trigger the form submission event.

1.6 radio

   is a radio box component, which often needs to be used in conjunction with the component, in which the label is nested.

Radio.wxml

14.radio small case uses for cycle to generate {{item.value}} in batches

Radio.js

Page ({data: {radioItems: [{name: 'tiger', value:' tiger'}, {name: 'elephant', value:' elephant'}, {name: 'lion', value:' lion', checked: 'true'}, {name:' penguin', value: 'penguin'}, {name: 'elk', value:' Milu deer'} {name: 'swan', value:' Swan'},]}, radioChange:function (e) {console.log ("change event occurred in radio Carry a value of: ", e.detail.value)}}) 1.7 slider

   is a sliding selector, which is used to visually change the value of a variable.

Slider.wxml

15.slider small case (1) current progress value is displayed on the right side of the slider (2) Custom Slider Color and Slider style (3) disable Slider (4) add Slider listening event 1.8 switch

   is a switch selector, which is often used to switch on a form.

Switch.wxml

16.switch small case adds switch event snooping 1.9 textarea

   is a multi-line input box, which is often used for multi-line text input.

2. small cases of practical training-questionnaire survey

Survey.wxml

1. How old are you now? Freshman, sophomore, junior, senior 2. What is the biggest use of your mobile phone? Social online shopping to learn the other 3. How many hours do you usually use your cell phone every day? 4. Have you ever used WeChat Mini Programs before? There is no 5. Talk about your views on the future development of WeChat Mini Programs. Submit for reset.

Survey.js

Page ({universityChange: function (e) {console.log ("how much you choose now:", e.detail.value)}, mobilChange: function (e) {console.log ("the biggest use you choose to use your mobile phone is:", e.detail.value)}, timechange: function (e) {console.log ("the time you choose to use your phone every day is:", e.detail.value + "hours")} ProgramChange: function (e) {console.log ("did you choose to use WeChat Mini Programs:", e.detail.value)}, onSubmit (e) {console.log ("the views you entered on the future of Mini Program are:" + e.detail.value.textarea)} OnReset () {console.log ("the form has been reset")}) these are all the contents of the article "what are the form components commonly used by WeChat Mini Programs"? Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to 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.