Master WeChat Mini Program UI: Picker, Checkbox, Slider, Switch & Form Guide

Picker (Scroll Selector)

Code Structure

// wxml
<picker bindchange="bindChange" value="{{index}}" range="{{array}}">
      当前选择：{{array[index]}}
</picker>

// js
Page({
    data: {
        array: ['美国', '中国', '巴西'],
        index: 0
    },
    bindPickerChange: function(e) {
        console.log('picker 值为:', e.detail.value)
        this.setData({
            index: e.detail.value
        })
    }
})

Multi-select Checkbox

Code Structure

<checkbox-group>

contains multiple

<checkbox>

<checkbox-group>
    <checkbox value="" checked=""/>name
    ...
</checkbox-group>

<checkbox-group>

can bind change event

// wxml
<checkbox-group bindchange="checkboxChange">
...
</checkbox-group>

// js
checkboxChange: function(e) {
    console.log('value：', e.detail.value)
}

Slider

Code Structure

<slider bindchange="sliderchange" step="5" min="50" max="200" show-value/>

sliderchange:function(e) {
  console.log('slider 值为', e.detail.value)
}

Switch

Code Structure

<switch checked="{{isChecked}}" bindchange="switchChange"/>

switchChange: function (e){
    console.log('switch值为', e.detail.value)
}

Form Submission

Use the form component, place various form controls inside, and trigger submission with a button of type submit; the handler receives all form data.

Example Code

// wxml
<form bindsubmit="formSubmit">
  <switch name="switch"/>
  <slider name="slider"></slider>
  <button formType="submit">Submit</button>
</form>

// js
formSubmit: function(e) {
    console.log('提交的所有数据：', e.detail.value)
}

Source Code Download

Send the message ‘ 05 ’ to automatically receive the download link.