UniApp普通选择器（selector）实现

一、基础实现方式

1. 核心组件
   使用<picker>组件，通过mode="selector"启用普通选择器模式，range属性绑定选项数组，value控制选中项索引。关键代码结构：
   <picker mode="selector" :range="options" @change="bindPickerChange"> <view>{{ selected }}</view> </picker>
2. 数据绑定

• options支持动态更新，如从接口获取数据后重新赋值
• 选中值通过value属性或@change事件返回索引

二、功能扩展要点

1. 默认值设置
   通过value属性实现初始选中，支持动态修改：
   <picker :value="selectedIndex" @change="updateSelectedIndex">
2. 样式定制

• 使用class或style控制选择器外观（如宽度、背景色）
• 避免使用h1等标题标签，通过view+text组合实现标题

3. 交互优化

• 添加@columnchange事件监听滚动位置变化
• 使用placeholder提示未选择状态

三、全端兼容性处理

1. 平台差异

• 小程序端需注意picker-view的兼容性
• H5端支持input联动，实现表单自动填充

2. 性能优化

• 大数据量时启用lazy-load属性
• 避免频繁更新range数组，使用this.$set触发响应式更新

四、典型应用场景

1. 表单选择
   如性别选择、学历选择等固定选项场景
2. 动态筛选
   结合接口数据实现分类筛选（如商品分类）
3. 自定义弹窗
   通过uni-popup封装选择器，提升交互体验

以上方案覆盖了UniApp普通选择器的核心实现与扩展功能，可根据实际需求调整数据结构和交互逻辑。