,
wxml
<view class="date-background" wx:if="{{flag}}">
<view class='date-gray-background' bindtap='hiddeDatePicker'></view>
<view class='date-container'>
<view class="transparent">
<view class='date-confirm'>
<view bindtap='hiddeDatePicker' style="color:#f60">取消</view>
<input bindinput="bindKeyInput" type="text" class="searchInpt" style="width:220px" />
<view bindtap='confirm' style="color:#12a3f5">确定</view>
</view>
<picker-view indicator-class="indicator" value="{{setValues}}" bindchange="bindChange" bindpickend="_bindpickend"
immediate-change="{{true}}">
<picker-view-column class="pickViewColumn">
<text wx:for="{{list}}" wx:key="index" style="color:#000;line-height:46px;text-align:center;display:block"
decode="{{true}}">{{item[labelKey]}}</text>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
<view bindtap="showDatePicker" wx:else class="showPickerText">
{{itemsValue && itemsValue.name ?itemsValue.name :'请选择'+label}}
</view>
wxss
.showPickerText{
width: 240px;
text-align: right;
}
.date-background {
/* position: absolute; */
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 2000;
}
.searchInpt{
width: 220px;
border: 1px solid #e5e5e5;
height: 40px;
border-radius: 5px;
padding-left: 20px;
}
.date-gray-background {
position: absolute;
width: 100%;
top: 0;
background: rgba(0, 0, 0, .5);
height: calc(100% - 500rpx);
}
.date-container {
position: absolute;
width: 100%;
height: 900rpx;
overflow: hidden;
background: #fff;
bottom:0;
z-index: 1000;
}
.date-confirm {
display: flex;
justify-content: space-between;
align-items: center;
padding:0 20rpx;
font-size:34rpx;
line-height: 70rpx;
padding-top:10px;
color:var(--ThemeColor)
}
.pickViewColumn{
height: 900rpx;
/* margin-top: -300rpx; */
/* text-align: center; */
text-align: left;
}
.indicator{
height: 80rpx;
border: 1rpx solid #E5E8E8;
}
wxjs
Component({
options: {
// 在组件定义时的选项中启用多slot支持
multipleSlots: true,
},
/**
* 组件的属性列表
*/
properties: {
list: {
type: Array,
value: [],
},
value: {
type: Number,
value: 0,
},
label: {
type: String,
value: "",
},
labelKey: {
type: String,
value: "name",
},
labelValue: {
type: String,
value: "value",
},
},
observers: {
'list': function (params) {
if (this.data.itemsCopy.length) return
this.setData({
itemsCopy: params
})
},
},
data: {
flag: false,
searchValue: "",
setValues: [],
selectIndex: "",
itemsCopy: [],
itemsValue: {},
},
/**
* 组件的方法列表
*/
methods: {
search(e) {
let self = this;
self.triggerEvent("handleSearch", e.detail);
},
hiddeDatePicker() {
this.setData({
flag: !this.data.flag,
searchValue: "",
});
},
bindKeyInput(e) {
this.setData({
list: e.detail.value ? this.data.itemsCopy.filter(x => x.name.indexOf(e.detail.value) >= 0) : this.data.itemsCopy
})
},
showDatePicker() {
this.setData({
flag: !this.data.flag,
});
this.getItems();
},
confirm() {
let self = this;
let item = self.data.list[self.data.selectIndex] ?
self.data.list[self.data.selectIndex] :
self.data.list[0];
let selectIndex = self.data.selectIndex;
this.setData({
itemsValue: item
})
console.log("选中的值",item)
this.triggerEvent("myevent", {
name: item.name,
item: item,
selectIndex: selectIndex,
});
this.hiddeDatePicker()
},
bindChange(e) {
this.setData({
selectIndex: e.detail.value[0],
});
},
getItems(e) {
if(this.data.list.length && this.data.value){
this.setData({
setValues:[this.data.list.findIndex(x=>x[this.data.labelValue] == this.data.value) || 0]
});
}
},
},
});