WeChat mini-app (15th) checkbox component details, mini-app checkbox

Mini-Program (15th) checkbox component details, mini-program checkbox

The default checkbox style is a little ugly !!! The checkbox component is put into the checkbox-group as a multi-choice box, and set the listening event in the checkbox-group (only including the checkbox.

Checkbox-group listening method:

Multiple checkbox attributes:

Wxml

<! -- Checkbox-group is a checkbox group that has a monitoring event bindchange, which is used to select and cancel the monitoring data --> <checkbox-group bindchange = "listenCheckboxChange"> <! -- The label is used to display the content here, And the for loop method wx: for-items defaults to item for each item --> <label style = "display: flex;" wx: for-items = "{items }}"> <! -- The value and default selected status are both bound to js through data --> <checkbox value = "{item. name }}" checked = "{item. checked }}"/>{{ item. value }}</label> </checkbox-group>

Js

Page ({/*** initialization data */data: {items: [{name: 'java', value: 'android', checked: 'true'}, {name: 'object-C', value: 'ios '}, {name: 'jsx', value: 'reactnative '}, {name: 'js', value: 'cmd'}, {name: 'python', value: 'web'}]},/*** listen to the checkbox event */listenCheckboxChange: function (e) {console. log ('when the checkbox in the checkbox-group is selected or the checkbox is canceled '); // print the detailed information contained in the object console. log (e) ;}, onLoad: function (options) {// parameters brought about by PAGE initialization options for page Jump}, onReady: function () {// page rendering complete}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closed }})

 

Related Articles:

Hello WeApp icon component
Window text Component switch component
Tabss component action-sheet
Application lifecycle button Component modal component
Page lifecycle checkbox component toast component
Modular Details form component details loading component
Data Binding input component navigator component
View component picker component audio component
Scroll-view component radio component video component
Swiper component slider component Image component