All Products
Search
Document Center

Bottom scroll selector

Last Updated: Feb 04, 2021

This topic describes picker, the scroll selector that pops out from the bottom.

Attribute Type Default value Description Minimum version
range String[] or Object[] [] When the value is String[], it indicates the list of selectable strings. When the value is Object[], you must specify range-key to indicate selectable fields. -
range-key String - When range is set to Object[], you can specify the key value in Object as the display content of the selector by using range-key. -
value Number - Indicate the number of the selected item in the range, where the subscript starts from 0. -
onChange EventHandle - Trigger when value is changed, where event.detail = {value: value}. -
disabled Boolean false Whether to disable the button. -

Illustration

Code sample

 
  1. <view class="section">
  2. <view class="section-title">The region selector</view>
  3. <picker onChange="bindPickerChange" value="{{index}}" range="{{array}}">
  4. <view class="picker">
  5. The current choice: {{array[index]}}
  6. </view>
  7. </picker>
  8. <picker onChange="bindObjPickerChange" value="{{arrIndex}}" range="{{objectArray}}" range-key="name">
  9. <view class="row">
  10. <view class="row-title">ObjectArray</view>
  11. <view class="row-extra">The current choice: {{objectArray[arrIndex].name}}</view>
  12. <image class="row-arrow" src="/image/arrowright.png" mode="aspectFill" />
  13. </view>
  14. </picker>
  15. </view>
 
  1. Page({
  2. data: {
  3. array: ['China', 'US', 'Brazil', 'Japan'],
  4. objectArray: [
  5. {
  6. id: 0,
  7. name: 'US',
  8. },
  9. {
  10. id: 1,
  11. name: 'China',
  12. },
  13. {
  14. id: 2,
  15. name: 'Brazil',
  16. },
  17. {
  18. id: 3,
  19. name: 'Japan',
  20. },
  21. ],
  22. arrIndex: 0,
  23. index: 0
  24. },
  25. bindPickerChange(e) {
  26. console.log('picker sends the choice change, and the carried value is ', e.detail.value);
  27. this.setData({
  28. index: e.detail.value,
  29. });
  30. },
  31. bindObjPickerChange(e) {
  32. console.log('picker sends the choice change, and the carried value is ', e.detail.value);
  33. this.setData({
  34. arrIndex: e.detail.value,
  35. });
  36. },
  37. });