一、picker组件介绍
小程序中的picker组件是一种用户界面组件,它可以让用户在一个滚动列表中选择一个或多个选项。picker组件提供了多种选择器类型和设置项,以支持灵活的选择器呈现,为用户提供更好的体验。
picker组件是由微信团队提供的,开发者可以在小程序中直接使用该组件,无需做太多复杂的开发工作。picker组件分为单列选择器和多列选择器两种类型,可以适用于不同场景的应用。
二、picker组件类型
picker组件有两种类型:单列选择器和多列选择器。
1. 单列选择器
单列选择器使用一个滚轮列表,用户可以在滚轮列表中选择一个选项。单列选择器用于选择单个选项,例如选择省份、城市或日期等。
picker组件的基本使用: <picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker">{{array[index]}}</view> </picker> js文件的基本处理: Page({ data: { index: 0, array: ['美国', '中国', '巴西', '日本'] }, bindPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) } })
2. 多列选择器
多列选择器使用多个滚轮列表,用户可以在每个滚轮列表中选择一个选项。多列选择器用于选择具有关联性的多个选项,例如选择省份和城市、年份和月份等。
picker组件的基本使用: <picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{{[0, 0]}}" range="{{multiArray}}"> <view class="picker">{{multiArray[0][value[0]]}}</view> <view class="picker">{{multiArray[1][value[1]]}}</view> </picker> js文件的基本处理: Page({ data: { multiArray: [['北京市', '上海市', '广州市', '深圳市'], ['东城区', '西城区', '崇文区', '宣武区']], multiIndex: [0, 0] }, bindMultiPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ multiIndex: e.detail.value }) } })
三、picker组件设置项
picker组件提供了多个设置项,以支持更灵活的选择器样式和功能。
1. 设置选项值范围
通过设置range属性,可以指定picker组件的选项值范围。
picker组件设置选项值范围: <picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker">{{array[index]}}</view> </picker>
2. 设置默认选项值
通过设置value属性,可以指定picker组件的默认选项值。
picker组件设置默认选项值: <picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker">{{array[index]}}</view> </picker>
3. 设置选项改变事件
通过设置bindchange属性,可以在选项改变时触发一个事件处理函数。
picker组件设置选项改变事件: <picker mode="selector" bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker">{{array[index]}}</view> </picker> js文件的基本处理: Page({ data: { index: 0, array: ['美国', '中国', '巴西', '日本'] }, bindPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) } })
4. 设置滚轮显示数量
通过设置picker-group组件的height属性,可以指定picker组件的滚轮显示数量。
picker-group组件设置滚轮显示数量: <picker-group height="160rpx"> <picker mode="selector" range="{{['100元', '200元', '300元', '400元', '500元']}}" bindchange="bindPickerChange"> <view class="picker">{{value}}</view> </picker> <picker mode="selector" range="{{['男', '女']}}" bindchange="bindPickerChange2"> <view class="picker">{{value}}</view> </picker> </picker-group>
5. 设置滚轮固定位置
通过设置picker组件的animation属性,可以将picker的滚轮固定到某一位置。
picker组件设置滚轮固定位置: <picker mode="selector" range="{{['100元', '200元', '300元', '400元', '500元']}}" animation="{{animation}}" bindchange="bindPickerChange"> <view class="picker">{{value}}</view> </picker> js文件的基本处理: Page({ data: { animation: {} }, bindPickerChange: function (e) { console.log('picker发送选择改变,携带值为', e.detail.value) var animation = wx.createAnimation({ duration: 500, timingFunction: 'ease-out' }) animation.translateY(-100).step() this.setData({ value: e.detail.value, animation: animation.export() }) } })
四、picker组件应用
picker组件可以应用于不同领域,例如产品订单、配送地址、预约时间、活动报名等场景。
以预约时间选择器为例,实现类似日期时间选择器的功能。
<view class="page__bd page__bd_spacing"> <view class="weui-cells__title">预约时间 <picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="weui-cells__label"> {{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}} </view> </picker> </view> js文件的基本处理: Page({ data: { multiArray: [[], []], multiIndex: [0, 0] }, onLoad: function () { var date = new Date(); var years = [] var months = [] var days = [] var hours = [] var minutes = [] for (var i = date.getFullYear(); i <= date.getFullYear() + 1; i++) { years.push(i) } for (var i = 1; i <= 12; i++) { months.push(i) } for (var i = 1; i <= 31; i++) { days.push(i) } for (var i = 0; i <= 23; i++) { hours.push(i) } for (var i = 0; i <= 59; i++) { minutes.push(i) } this.setData({ 'multiArray[0]': years, 'multiArray[1]': [months, days, hours, minutes] }) }, bindMultiPickerChange: function (e) { console.log('picker发送选择改变,携带值为:', e.detail.value) this.setData({ multiIndex: e.detail.value }) } })
五、总结
本文介绍了小程序中的picker组件,包括picker组件的基本介绍、类型、设置项以及应用,希望对开发者在小程序开发中使用picker组件有所帮助。