小程序4——容器

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

一、组件

1. 视图容器

表单（只列出需要注意的点）

1. label

<radio-group name="radio">
	<radio id="radio1" value="radio1"/>
	<label for="radio1">选项一</label>
	<label><radio value="radio2"/>选项二</label>
</radio-group>

2. picker

1. mode=“multiSelector”

多列选择器比普通选择器多一个 bindcolumnchange 属性，当某列数组发生变化时调用绑定的函数。

index.wxml

<picker
  mode="multiSelector"
  value="{{multiIndex}}"
  range="{{multiArray}}"
  bindchange="bindMultiPickerChange"
  bindcolumnchange="bindMultiPickerColumnChange">
  <view>
    当前选择: {{multiArray[0][index[0]]}}, {{multiArray[1][index[1]]}}, {{multiArray[2][index[2]]}}
  </view>
</picker>

index.js

Page({
	data: {
		multiArray: [['a', 'b'], ['aa', 'aaa', 'aaaa'], ['asd', 'axv', 'adad']],
		multiIndex: [0, 0, 0]
	},
	
	bindMultiPickerChange: function (e) {
		console.log(e)
		// this.setData({
		// 	index: e.detail.value
		// })
	},
	
	bindMultiPickerColumnChange: function(e) {

	}
}

2. mode=“time”

index.wxml

<picker
  mode="time"
  value="{{timeValue}}"
  start="09:00"
  end="10:00"
  bindchange="bindTimeChange"
  bindcancel="bindCancel">
  <view>当前选择: {{timeValue}}</view>
</picker>

index.js

Page({
	data: {
		timeValue: '09:30'
	},

	bindTimeChange: function (e) {
		console.log(e)
		this.setData({
			timeValue: e.detail.value
		})
	}

当选择的时间超出 start 和 end 当范围时，会自动回弹到最近的范围临界值处。