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
},