§ ITPOW >> 文档 >> 微信开发

作者：vkvi 来源：ITPOW（原创） 日期：2017-4-27

picker 实现从底部弹出滚动选择器，有个属性叫 mode，只有三个值：

• mode="selector"
• mode="time"
• mode="date"

所以要实现地区选择、性别选择……，就用 mode="selector"，然后自己填充数据。

我们倒着介绍，先介绍 mode="date"

<picker mode="date" start="2017-1-1" end="2017-4-1" value="2017-2-1" fields="month"> <view>点我弹出选择器</view> </picker>

fields 可选择值：year（细化到年）、month（细化到月）、day（细化到日）

效果：

注意：“微信web开发者工具”在这里有个 BUG，上面我们指定的是 2017 年，但列表显示的是 2018 年。这个 BUG 只存在于“微信web开发者工具”，在手机微信上不存在这个 BUG。

绑定事件：

鉴于上面说的 BUG，为了测试方便，我们将 end 改到 2018 年。

<picker mode="date" start="2017-1-1" end="2018-4-1" value="{{date}}" fields="month" bindchange="bindDateChange"> <view>{{date}}</view> </picker>

 

Page({ data: { date: '2017-2' }, bindDateChange: function(e) { this.setData({ date: e.detail.value }) } })

data 值会自动映射到控件，但是控件的值变化并不会映射到 data，所以要用一个方法（这里是 bindDateChange)来 setData。

mode="time"

时间选择与日期选择相似，时间格式为：hh-mm，不具备 fields 属性。

mode="selector"

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

 

Page({ data: { array: ['微信', 'QQ', 'ITPOW'], index: 2 }, bindPickerChange: function(e) { this.setData({ index: e.detail.value }) } })

性别的话，就是改上面 array 的值，它会将 array 的值赋给选择框。