picker
功能描述
从底部弹起的滚动选择器。就是类似于element-ui中的下拉选择器
通用属性
mode：选择器类型
和法值 说明
selector 普通选择器
multiSelector 多列选择器
time 时间选择器
date 日期选择器
普通选择器：mode = selector
属性名 说明
range mode 为 selector 或 multiSelector 时，range 有效
range-key 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容
value 表示选择了 range 中的第几个（下标从 0 开始）
bindchange value 改变时触发 change 事件，event.detail = {value}
代码示例（在form中使用）
range：就是选择器的数据源
range-key：当数据源的数据类型为数组嵌套对象时，需要 加上 range-key，否则滑动时页面显示的数据就为 object object 这种了
value：是选中的数据的下标，当有默认选中数据时，可以给value赋值
name：form表单的属性，在form中使用时，写上name 可在表单提交时，拿到选中的值，单这里同element-ui中的选择器不同，这里拿到的数据，是对应数据的下标，并不是对应的value
所以下面的formSubmit方法中 e.detail.value 中的 country 是 选中数据的下标，但一般提交给后端数据时，以下文的 objectArray数据为例子 传给后端的是 id。所以在提交表单时，需要处理下
index.wxml：
<view class="box">
<form bindsubmit="formSubmit">
<view class="form-item">
<text class="head">国家选择：</text>
<picker mode="selector" bindchange="bindPickerChange" name="country" range-key="name" value="{{index}}" range="{{objectArray}}">
<view class="head pic">
{{objectArray[index].name}}
</view>
</picker>
</view>
<button form-type="submit" type="primary">提交</button>
</form>
</view>
index.wxss：
.box{
padding: 30rpx;
}
.form-item{
display: flex;
background-color: rgb(221, 230, 230);
margin-bottom: 10rpx;
border-radius: 30rpx;
}
.head{
line-height: 100rpx;
margin-left: 30rpx;
}
.tail{
height: 100rpx;
}
.pic{
height: 100rpx;
width: 500rpx;
margin-left: -2rpx;
}
index.js：
Page({
/**
* 页面的初始数据
*/
data: {
index:'', //选中的下标
selectedObject: {}, // 用于存储选中的对象
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
formData:{}
},
// 表单提交的
formSubmit(e) {
this.setData({
formData:e.detail.value
})
console.log(this.data.formData)
},
// 选择器选择的
bindPickerChange(e){
console.log(e)
this.setData({
index:e.detail.value,
selectedObject:this.data.objectArray[e.detail.value]
})
console.log(this.data.selectedObject,'选中的数据')
},
})
原文链接：https://blog.csdn.net/m0_52244931/article/details/136601750