微信小程序进阶开发－picker 实现选择框、时间选择、日期选择、性别选择……

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

mode="selector"

mode="time"

mode="date"

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

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

点我弹出选择器

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

效果：

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

绑定事件：

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

{{date}}

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"

当前选择：{{array[index]}}

Page({

data: {

array: ['', '女', '男'],

index: 2

},

bindPickerChange: function(e) {

this.setData({

index: e.detail.value

})

}

})