微信小程序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出来看一下
在这里插入图片描述

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


好了,结束了。
在这里插入图片描述

发布了2 篇原创文章 · 获赞 0 · 访问量 15
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览