UniApp：方法篇：循环picker

<template>
	<view>
		<view class="">
			<!-- 
				@click="pickerIndex = index"   点击时将当前下标【index】赋值给【pickerIndex】
			 -->
			<picker v-for="(item,index) in list" mode="selector" :range="item.content" @change="pickerChange" @click="pickerIndex = index">
				<view class="one">{{item.text}}</view>
			</picker>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						content:["孙悟空","猪八戒"],
						text:'请选择西游记'
					},
					{
						content:["大娃","二娃"],
						text:"请选择葫芦娃"
					}
				],
				// 定义当前点击获取的下标，数组是从【0】开始的；
				pickerIndex:0
			}
		},
		methods: {
			// 方法执行的是当前的点击事件 
			pickerChange:function(e){
				this.list[this.pickerIndex].text = this.list[this.pickerIndex].content[e.detail.value];
			}
		}
	}
</script>

<style>
	.one{height: 80rpx;border: 1rpx solid #007AFF;}
</style>