select选择器 

html代码:

//@click:点击显示选择器并传值
<view @click="pickerSelectFun(item.field,item.operate)" style="display: flex;justify-content: space-between;line-height: 33px;">
	<view class="txt">{{item.title}}:</view>
	<!-- #ifndef MP -->
	<view>
		{{select_value[item.field]?select_value[item.field]:'请选择'}}
		<u-icon size="28" color="#888897" name="arrow-right"></u-icon>
	</view>
	<!-- #endif -->
	<!-- #ifdef MP -->
	<view style="display: flex;">
		<view v-for="(i,inx) in select_value" :key="inx"
		v-if="i.name==item.field">
				{{i.value}}
		</view>
		<view v-else style="display: none;"></view>
		<u-icon size="28" color="#888897" name="arrow-right"></u-icon>
	</view>
	<!-- #endif -->
	
</view>

<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select>

主要代码:

@click="pickerSelectFun(需要传递的参数)"

<u-select v-model="selectShow" :list="selectList" @confirm="selectConfirmFun"></u-select> 

 js代码:

调用函数,给selectList赋值

pickerSelectFun(type,op){
	//selectList:存放选择器的数据
	this.selectList = []
	//给selectlist赋值
	if(op=='='){
		let inx=this.screenList.findIndex(item=> item.field==type)
		let data=this.screenList[inx].searchList
		for(var i = 0;i<Object.keys(data).length;i++){
			this.selectList.push({
				value: Object.keys(data)[i],
				label: data[Object.keys(data)[i]]
			})
		}
	}else{
		if(type=='level'){
			this.selectList=this.lseleect
		}else if(type=='industry'){
			this.selectList=this.iselect
		}else if(type=='source'){
			this.selectList=this.sselect
		}else{
			this.selectList=this.sellerSelect
		}
	}
	
	//selectShow 为true显示选择器
	this.selectShow = true;
	this.selectType=type
},

this.selectList:选择器显示的数据 

 this.selectShow:true-显示选择器;false-隐藏选择器;

选择器显示效果:

数据为selectList数组

 选择数据:

选择器显示,点击确认调用 selectConfirmFun方法(内容根据需求调整)

selectConfirmFun: function(e) {
    console.log(e)
	let value = e[0].value;
	let str = e[0].label;
},

日期选择器

<view class="flex-white-plr26 ptb20 bdb_f5"
@click="DateShow = true, khDateType = item.name">
	<text class="mr26">{{item.title}}</text>
	<!-- #ifndef MP -->
	<view class="w420">{{datelist[item.name]}}</view>
	<!-- #endif -->
	<!-- #ifdef MP -->
	<view class="w420" v-for="(it,index) in datelist" :key="index">
	<view v-if="datelist[index].type==item.name">{{datelist[index].value}}</view>
	</view>
	<!-- #endif -->
	<u-icon class="ml26" name="calendar" size="40" color="#888888"></u-icon>
</view>

<u-picker :params="pickerTimeParams" :safe-area-inset-bottom="true" end-year="2100" v-model="DateShow" @confirm="pickerTimeConfirmFun" :default-time="defaulTime" mode="time"></u-picker>
data(){
    return{
        //控制选择器的显示
        DateShow: false,
        //设置时间和时间戳
		pickerTimeParams: {
		year: true,
		month: true,
		day: true,
		hour: true,
		minute: true,
		second: true,
		timestamp: true
		},
        //类型
		khDateType: '',
        defaulTime:'',
    }
}
// 时间选择器点击确定按钮,返回当前选择的值
pickerTimeConfirmFun: function(e) {
	let stamp=e.timestamp*1000
	let nowtime=dateApi.getNowDate()
	if(that.khDateType=='next_time'){
		if(stamp<nowtime.st){
			uni.showToast({
				title:'不得早于当前时间!'
			})
			return
		}
	}else if(this.khDateType=='overdue'){
		if(stamp>nowtime.st){
			uni.showToast({
				title:'不得晚于当前时间!'
			})
		return
		}
	}
	
	let dateTime = new Date().getTime();
	let time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
	this.datelist[that.khDateType] = time;
	this.infolist[that.khDateType] = time;
	let obj={};
	let index=that.khDateType
	obj.type=index
	obj.value=time
	let a=this.datelist.findIndex(item => item.type == index);
	if(a>-1){
		this.datelist[a].value=time;
	}else{
		this.datelist.push(obj)
	}
	this.setData({
		datelist:this.datelist
	})
	this.isDate=false

},

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐