picker

普通选择器

先看官网上 picker对value的描述

value 的值表示选择了 range 中的第几个（下标从 0 开始）

所以value是index

直接使用picker

html

		<view class="cu-form-group">
			<view class="title">0表示男，1表示女 性别1：sex1==={{item.sex1}}</view>
			<picker @change="sexSelect1" :value="item.sex1" :range="sexList1">
				<view class="picker">{{ sexList1[item.sex1] ? sexList1[item.sex1] : '请选择' }}</view>
			</picker>
		</view>
		<view class="cu-form-group">
			<view class="title">F表示男，M表示女性别2：sex2==={{item.sex2}}</view>
			<picker @change="sexSelect2" :range="sexList2" :range-key="'label'">
				<view class="picker">{{ sexList2[sexindex2] ? sexList2[sexindex2].label : '请选择' }}</view>
			</picker>
		</view>

data

		   item:{
				sex1:0,
				sex2:'F',
			},
			sexindex1:-1,
			sexindex2:-1,
			sexList1:['男','女'],
			sexList2:[{
				value:'F',
				label:'男'
			},
			{
				value:'M',
				label:'女'
			}],

js

	onLoad(option) {
		//遍历当前性别的数组，根据传回的值和数组里的value对比
		this.sexList2.forEach((item, index) => {
			if (item.value == this.item.sex2) {
				this.sexindex2 = index;
			}
		});
		
	},
	methods: {
		sexSelect1(e){
			this.item.sex1 = e.detail.value;
		},
		sexSelect2(e){
			this.sexindex2 = e.detail.value;
			this.item.sex2= this.sexList2[this.sexindex2].value;
		}
	}

效果

自定义picker组件

直接贴代码

<template>
	<view class="i-select">
		<picker class="i-picker" @change="change" :value="index" :range="labelArray">
			<view> {{labelArray[index]?labelArray[index]:'请选择' }}</view>
		</picker>
	</view>
</template>
<script>
//5+App 支付宝小程序 该组件不支持
export default {
	props: {
		value: {
			require: true
		},
		options: {
			type: Array,
			require: true,
			defalut: []
		}
	},
	watch: {
		value: {
			handler(newVal) {
				this.index = this.valueArr.findIndex(val => val === newVal)
			}
			// immediate: true
		}
	},
	mounted() {
		if(this.options.length>0&&!this.options[1].label){
			this.labelArray.push('请选择')
			this.valueArr.push(null)
		}
		this.options.forEach(v => {
			if(v['label']){
				this.labelArray.push(v['label'])
				this.valueArr.push(v['value'])
			}else{
				this.labelArray.push(v)
				this.valueArr.push(v)
			}
		})
		this.index = this.valueArr.findIndex(val => val === this.value)
	},
	data() {
		return {
			index: 0,
			labelArray: [],
			valueArr: []
		}
	},
	computed: {},
	methods: {
		change(e) {
			this.$emit('pickerChange', e)
		}
	}
}
</script>
<style lang="less">
	.i-select{
		flex:1;
		display: flex;
		height: 100upx;
		align-items: center;
		border-radius: 5upx;
		padding-left:10upx;
		.i-picker{
			width: 100%;
			height: 100%;
			color: #000;
			line-height: 100upx;
			text-align: right;
		}
	}
</style>

使用方法
html

<view class="cu-form-group">
			<view class="title">性别3：sex3==={{item.sex3}}</view>
			<my-prcker v-model="item.sex3" :options='sexList3'></my-prcker>
		</view>
		<view class="cu-form-group">
			<view class="title">性别3：sex4==={{item.sex4}}</view>
			<my-prcker v-model="item.sex4" :options='sexList4'></my-prcker>
		</view>

date

			item:{
				sex3:'女',
				sex4:"F"
			},
			sexList4:[{
				value:'F',
				label:'男'
			},
			{
				value:'M',
				label:'女'
			}],
			sexList3:['男','女'],

引入组件 单页面

import myPrcker from "../component/my_picker.vue"
export default {
	components:{
		myPrcker
	}
	......

引入组件公共

 import myPrcker from './pages/component/my_picker.vue'
 Vue.component('my-prcker', myPrcker)

findIndex()方法

哪里写的不好，欢迎大家提建议