微信小程序picker组件设置默认（多个picker情况）

微信小程序picker组件设置默认（多个picker情况）

需求描述：所有的picker组件都默认显示"请选择"，当点击picker后弹出的才是选项内容

上篇文章中讲了只有一个picker组件的方法，这篇文章说说多个picker组件的方法。

先看图：

实现思路描述：

和单个的解决思路一样，
首先data{}中添加多个初始变量，有几个加几个，在用户选择这个组件的时候，通过一个三目运算，给picker组件中的value属性赋值，去判断这个变量的值，为null时，就显示请选择；为其他时，显示选项。

实现方式：

<!--wxml代码-->
<picker bindchange="bindYearPickerChange" value="{{yearIndex}}" range="{{yearArr}}">
	<view>
		{{seleNull?yearArr[yearIndex]:'请选择年份'}}
	</view>
</picker>
<picker bindchange="bindAddrPickerChange" value="{{addrIndex}}" range="{{addrArr}}">
	<view>
		{{addrNull?addrArr[addrIndex]:'请选择地区'}}
	</view>
</picker>
<picker bindchange="bindXuelPickerChange" value="{{xuelIndex}}" range="{{xuelArr}}">
	<view>
		{{xuelNull?xuelArr[xuelIndex]:'请选择学历'}}
	</view>
</picker>

//js代码
page({
	data: {
	   seleNull:null,//设置的变量
	   yearArr: ['2020', '2019', '2018'],//选项的值
	   yearIndex: 0   //选项的索引
	},
	bindYearPickerChange: function(e) {
	    console.log(this.data.yearArr[e.detail.value])
	    this.setData({
		    seleNull:'0',
		    yearIndex: e.detail.value
	    })
  	},  	
	bindXuelPickerChange: function(e) {
		console.log(this.data.xuelArr[e.detail.value])
		this.setData({
			xuelNull: '0',
			xuelIndex: e.detail.value
		})
	},
	bindAddrPickerChange: function(e) {
		console.log(this.data.addrArr[e.detail.value])
		this.setData({
			addrNull: '0',
			addrIndex: e.detail.value
		})
	},
})

测试一下：选择了这几个

大家可以console出来看一下

本篇文章为个人见解，如果各位大佬有更好的解决方式欢迎评论指出，谢谢~~~~~~~~

---

好了，结束了。