1. picker组件简介
小程序中的picker组件是用来提供一个可滚动选择的列表，它可以帮助用户更快捷地选择自己需要的内容，比如日期、地址、颜色等等。此外该组件还可以通过设置mode属性实现多种选择模式。
1.1 picker组件的用法
picker组件分为两部分：外部容器picker和内部选择器picker-view。外部picker的作用是控制选择器的显示和隐藏，而内部picker-view则是提供数据选择的核心部分。
让我们来看一下picker组件最基本用法：
// 在wxml文件中定义
<view class="picker-wrapper">
<picker mode="date" value="{{date}}" start="{{startDate}}" end="{{endDate}}" bindchange="onDatePickerChange">
<view class="picker-label">{{date}}</view>
</picker>
</view>
// 在js文件中定义
Page({
data: {
startDate: '1970-01-01',
endDate: '2100-12-31',
date: '2022-12-31'
},
onDatePickerChange(event) {
console.log(event.detail.value)
this.setData({
date: event.detail.value
})
}
})
在上面的例子中，我们定义了一个mode为'date'的picker，它的起始日期为1970-01-01，终止日期为2100-12-31，并且默认选择了2022-12-31这一天。当用户选择日期时，页面会触发bindchange事件，我们可以通过event.detail.value获取到用户选择的日期，并将其赋值给data中的date变量。这样页面上显示的日期就会自动更新。
除了提供日期选择，picker组件还支持多种选择模式，包括selector、multiSelector、time、region等等。以下是一个例子，可以展示picker组件在selector模式下的用法：
// 在wxml文件中定义
<view class="picker-wrapper">
<picker mode="selector" range="{{fruitList}}" bindchange="onPickerChange">
<view class="picker-label">{{fruitList[fruitIndex]}}</view>
</picker>
</view>
// 在js文件中定义
Page({
data: {
fruitList: ['苹果', '香蕉', '橘子', '草莓', '葡萄'],
fruitIndex: 0
},
onPickerChange(event) {
console.log(event.detail.value)
this.setData({
fruitIndex: event.detail.value
})
}
})
在上面的例子中，我们定义了一个mode为'selector'的picker，它的range为fruitList数组（包含'苹果', '香蕉', '橘子', '草莓', '葡萄'），默认选择了第一个元素'苹果'。当用户选择水果时，页面会触发bindchange事件，我们可以通过event.detail.value获取到用户选择的水果下标，并将其赋值给data中的fruitIndex变量。这样页面上显示的水果名称就会自动更新。
2. picker组件的高级用法
2.1 设置初始化选中项
在picker组件中，我们可以通过value属性设置picker-view在初始化时默认选中的项。value属性的值是一个数组，表示需要选中的节点的index值，例如[0, 1]表示选中第1列的第2个元素。
// 在wxml文件中定义
<view class="picker-wrapper">
<picker mode="multiSelector" range="{{list}}" value="{{[1, 2]}}" bindchange="onPickerChange">
<view class="picker-label">{{list[0][1]}}, {{list[1][2]}}</view>
</picker>
</view>
// 在js文件中定义
Page({
data: {
list: [
['1', '2', '3'],
['a', 'b', 'c', 'd']
]
},
onPickerChange(event) {
console.log(event.detail.value)
}
})
在上面的例子中，我们展示了在multiSelector模式下，设置默认选中值的方法。我们通过value属性将第1列的第2个元素和第2列的第3个元素初始化为选中状态。
2.2 设置自定义选择器样式
在picker组件中，我们可以通过设置style属性来自定义选择器的样式。style属性接受一个css样式对象，可以设置的属性包括：picker、picker-view、picker-view-column。
// 在wxml文件中定义
<picker mode="selector" range="{{fruitList}}" bindchange="onPickerChange" style="background-color: cyan;">
<view class="picker-label">{{fruitList[fruitIndex]}}</view>
</picker>
在上面的例子中，我们设置了picker的背景颜色为青色（cyan）。
2.3 动态更新选择器数据
如果我们想要动态改变一个picker的数据（比如为一个下拉框提供动态选项），我们可以借助picker组件提供的setData方法：
// 在wxml文件中定义
<picker mode="selector" range="{{fruitList}}" bindchange="onPickerChange">
<view class="picker-label">{{fruitList[fruitIndex]}}</view>
</picker>
// 在js文件中定义
Page({
data: {
fruitList: ['苹果', '香蕉', '橘子', '草莓', '葡萄'],
fruitIndex: 0
},
onLoad() {
// 模拟异步请求
setTimeout(() => {
const newList = ['桃子', '西瓜', '樱桃', '橙子']
this.setData({
fruitList: newList
})
}, 2000)
},
onPickerChange(event) {
console.log(event.detail.value)
this.setData({
fruitIndex: event.detail.value
})
}
})
在上面的例子中，我们模拟了一个异步请求，2秒后将数据源中的水果列表改为了'桃子', '西瓜', '樱桃', '橙子'。此时我们可以调用setData方法，将新的数据覆盖掉旧数据，这样picker组件会自动触发页面重渲染，并实时更新选择器的选项。
2.4 设置选择器的文案
在picker组件中，我们可以通过设置picker-view-column元素的content属性为一个数组，来自定义选择器每一项的文案。例如下面的例子中，我们把水果列表的值改为了{label: '榴莲', value: 'liulian'}这样的对象，然后通过设置content属性，来指定文案的显示方式。
// 在wxml文件中定义
<picker mode="selector" range="{{fruitList}}" bindchange="onPickerChange">
<picker-view-column>
<view wx:for="{{fruitList}}" wx:key="{{index}}">{{item.label}}</view>
</picker-view-column>
</picker>
// 在js文件中定义
Page({
data: {
fruitList: [
{label: '苹果', value: 'pingguo'},
{label: '香蕉', value: 'xiangjiao'},
{label: '橘子', value: 'juzi'},
{label: '草莓', value: 'caomei'},
{label: '葡萄', value: 'putao'}
],
fruitIndex: 0
},
onPickerChange(event) {
console.log(event.detail.value)
this.setData({
fruitIndex: event.detail.value
})
}
})
在上面的例子中，我们将fruitList改为了数组对象，并通过wx:for循环生成选择器列的文案。选择器每一项文案的显示方式由item.label来决定。
2.5 picker组件嵌套
在一些复杂的表单场景中，我们可能需要多级下拉框，此时可以通过picker组件嵌套的方式来解决。例如下面的例子，我们定义了一个两级地区选择器，用户先选择省份，再选择城市：
// 在wxml文件中定义
<view class="picker-wrapper">
<picker mode="selector" range="{{provinceList}}" bindchange="onProvinceChange" style="width: 50%;">
<view class="picker-label">{{provinceList[provinceIndex].label}}</view>
</picker>
<picker mode="selector" range="{{cityList}}" bindchange="onCityChange" style="width: 50%;">
<view class="picker-label">{{cityList[cityIndex].label}}</view>
</picker>
</view>
// 在js文件中定义
Page({
data: {
provinceList: [
{label: '北京市', value: 'bj'},
{label: '上海市', value: 'sh'},
{label: '广东省', value: 'gd'},
{label: '河北省', value: 'hb'}
],
provinceIndex: 0,
cityList: [
{label: '北京市', value: 'bj'},
{label: '上海市', value: 'sh'},
{label: '广州市', value: 'gz'},
{label: '深圳市', value: 'sz'},
{label: '天津市', value: 'tj'},
{label: '石家庄市', value: 'sjz'},
{label: '唐山市', value: 'ts'}
],
cityIndex: 0
},
onProvinceChange(event) {
console.log(event.detail.value)
const provinceIndex = event.detail.value
const cityList = this.getCityList(provinceIndex)
this.setData({
provinceIndex: provinceIndex,
cityList: cityList,
cityIndex: 0
})
},
onCityChange(event) {
console.log(event.detail.value)
this.setData({
cityIndex: event.detail.value
})
},
getCityList(provinceIndex) {
const cityMap = {
bj: [
{label: '北京市', value: 'bj'}
],
sh: [
{label: '上海市', value: 'sh'}
],
gd: [
{label: '广州市', value: 'gz'},
{label: '深圳市', value: 'sz'}
],
hb: [
{label: '石家庄市', value: 'sjz'},
{label: '唐山市', value: 'ts'}
]
}
const provinceValue = this.data.provinceList[provinceIndex].value
return cityMap[provinceValue] || []
}
})
在上面的例子中，我们先定义了两个picker，分别表示省份和城市的选择框。当用户选择省份时，我们通过onProvinceChange方法动态生成城市数据，并设置城市选择器的数据和当前选中项。
3. picker组件的优缺点
3.1 优点
简单易用 — picker组件非常易于使用，只需要几行代码就可以实现基本的下拉框、日期选择框等效果。
功能强大灵活 — picker组件不仅支持单列数据选择，还可以实现多列、日期、时间、颜色等各种选择模式，通过自定义样式可以实现更灵活的视觉效果。
代码复用度高 — picker组件可以在不同的小程序中复用，不需要重新开发或者修改代码，降低了开发成本和维护难度。
3.2 缺点
视觉效果较为单一 — picker组件的视觉效果固定，只能够通过样式自定义来实现丰富的视觉效果，相对于UI自定义度更高的select组件来说，视觉效果有所欠缺。
容易出现选择器数据显示错误问题 — 在实际开发中，我们可能需要动态更新选择器的数据，但是如果更新数据不及时或者方法不正确，就有可能导致选择器数据显示错误的问题。
4. 结语
通过本文，我们详细介绍了小程序中picker组件的简单用法、高级用法和优缺点分析。虽然picker组件存在一些缺点，但它仍然是我们在小程序开发中常用的组件之一。在实际项目中，开发者可以根据具体的业务需求，来选用不同的选择组件做处理。