界面组件 UI Components

选择器 Picker

在一组预设的同类型数据中选择输入,可以选择单项或者多项。

适用情况

  • 尽量使用选择器 (Picker) 帮助用户输入,而不是键盘
  • 选择器 (Picker) 上的预设数据应是有逻辑顺序并且能被用户预判的
  • 选择器 (Picker) 上预设数据过多时,为减少用户选择成本,应对数据进行归纳精简,如选择分钟时只提供 00、15、30、45 的选项。

不适用情况

  • 使用选择器 (Picker) 作为行为操作而非数据输入。建议:如需行为操作,可使用 Dropdown 或者 ActionSheet。

普通选择器

用于选择一组或多组数据,如日期、卡信息等。

  • React Native
  • Vue.js
  • 
    
  • <div>已选择: {{text}}</div>
    
    <up-picker v-model="pickerVisible" title="页面标题" :lists="lists" :selectedIndex='[1,5,0]' @onChange="onChange" @onClose="onClose" @onConfirm="onConfirm"></up-picker>
    
    <script>
    
    export default {
      data () {
        return {
          pickerVisible: true,
          text:'',
          lists:[
            ['文字内容0','文字内容1', '文字内容2', '文字内容3','文字内容4','文字内容5', '文字内容6','文字内容7', '文字内容8', '文字内容9', '文字内容10', '文字内容11', '文字内容12', '文字内容13'],
            ['文字内容0','文字内容1', '文字内容2', '文字内容3','文字内容4','文字内容5', '文字内容6','文字内容7', '文字内容8', '文字内容9', '文字内容10', '文字内容11', '文字内容12', '文字内容13'],
            ['文字内容0','文字内容1', '文字内容2', '文字内容3','文字内容4','文字内容5', '文字内容6','文字内容7', '文字内容8', '文字内容9', '文字内容10', '文字内容11', '文字内容12', '文字内容13'],
          ],
        }
      },
      methods: {
        handleBtn(){
          this.pickerVisible = true;
        },
        onClose() {},
        onConfirm(indexs) {
          var str = '';
          for(var i=0;i<indexs.length;i++){
            if(i==0){
              str +=  this.lists[i][indexs[i]];
            }
            else{
               str += ','+this.lists[i][indexs[i]];
            }
          }
          this.text = str;
        },
        onChange(which, selectIdx){}
      }
    }
    
    </script>
    
    

地址选择器

用于选择地址。

  • React Native
  • Vue.js
  • 
    
  • <div>地区选择: {{place}}</div>
    
    <up-picker-cascade v-model="pickerVisible" title="选择地址" :lists="lists" @onSelectedValue="onSelectedValue" @onClose="onClose"></up-picker-cascade>
    
    <script>
    
    export default {
      data () {
        return {
          pickerVisible: true,
          place:'',
          lists:{
            '上海':[
                '普陀区',
                '徐汇区'
            ],
            '山西':{
                '太原':{
                  '清徐县':[
                    '清源镇',
                    '徐沟镇',
                    '东于镇',
                    '盂封镇',
                    '马峪乡'
                  ],
                  '阳曲县':[
                    '天宁镇',
                    '夏家营镇',
                    '西营镇',
                    '水峪贯镇',
                    '西社镇',
                    '庞泉沟镇'
                  ]
                },
                '大同':{
                  '大同县':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇'
                  ],
                  '灵丘县':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇'
                  ],
                  '广灵县':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇'
                  ],
                  '阳高县':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇'
                  ],
                  '天镇县':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇',
                    'XX镇'
                  ]
                },
            },
            '天津':[
                '河西区',
                '东丽区',
                '西青区',
            ],
            '辽宁':{
                '沈阳':{
                  '辽中县':[
                    'XX镇',
                    'XX镇',
                  ],
                  '康平县':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                  '法库县':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                },
                '大连':{
                  '中山区':[
                    'XX镇',
                    'XX镇',
                  ],
                  '西岗区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                  '甘井子区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                  '旅顺口区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                  '普兰店区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                }
            },
            '江苏':{
                '南京':{
                  '玄武区':[
                    'XX镇',
                    'XX镇',
                  ],
                  '秦淮区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                  '鼓楼区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                  '建邺区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                },
                '连云港':{
                  '海州区':[
                    'XX镇',
                    'XX镇',
                  ],
                  '连云区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                  '赣榆区':[
                    'XX镇',
                    'XX镇',
                    'XX镇',
                  ],
                },
            },
            '河南':[
              '城区'
            ],
            '浙江':[
              '城区'
            ],
            '新疆':[
              '城区'
            ],
            '黑龙江':[
              '城区'
            ]
          }
        }
      },
      methods:{
        onSelectedValue(val){
          this.place = val
        },
        onClose(){}
      }
    }
    </script>
    
    

应用场景

  • 选择器 (Picker) 是一种高效的且通用的选择方式,在能够使用选择器 (Picker)满足设计需求的情况下请尽量使用选择器 (Picker)。如非特殊需要,请勿创造新的选择形式。

  • 选择器 (Picker) 应当限制可选项目,使用户选择更加便捷。

  • 选择器 (Picker) 及银行卡选择器 (Card Selector) 的头部统一格式为关闭(仅在进入第二层级时为返回)在左侧,中间为标题,无文字按钮或文字按钮在最右侧。是否有无文字按钮应根据选择器 (Picker)的实际交互行为而定。

  • 选择器 (Picker) 仅能用于数据输入,如果表示某项操作,请使用动作表 (Action Sheet)。


Vue.js Reference

普通选择器:

属性 说明 类型 可选值 默认值
v-model 显示状态,双向数据绑定 Boolean - false
title 标题 String - -
lists 传入 Picker 的数据 Array - -
selected-index 默认选中的选项组,数组每一项代表当前选中的index,例如:[1,5,0] Array - -
事件 说明 参数1 参数2
onClose 点击关闭时触发 - -
onChange 发生改变时触发 index1第几列 index2选择项
onConfirm 点击确定时触发 indexs所选择的选项组 -

级联选择器:

属性 说明 类型 可选值 默认值
v-model 显示状态,双向数据绑定 Boolean - false
title 标题 String - -
lists 传入 Picker 的数据 Object - -
事件 说明 参数  
onClose 点击关闭时触发 - -
onSelectedValue 选择完毕时返回选择项 String  

React Native Reference