需求是这样子的,微信原生的满足不了这种,所以自己封装了个组件
这个组件用到了vant 这个框架 里的vant-search ,也可以不用自己写个input,方法都是一样的
wxml部分
<view class="date-background" hidden="{{flag}}">
<view class='date-gray-background' bindtap='hiddeDatePicker'></view>
<view class='date-container'>
<view class="transparent">
<view class='date-confirm'>
<view bindtap='hiddeDatePicker'>取消</view>
<van-search
value="{{searchValue}}"
input-align="center"
placeholder="请输入关键词"
bind:change="search"
/>
<view bindtap='confirm'>确定</view>
</view>
<picker-view
indicator-class="indicator"
value="{{setValues}}"
bindchange="bindChange"
bindpickend="_bindpickend"
immediate-change="{{true}}"
>
<picker-view-column class="pickViewColumn">
<text wx:for="{{items}}" wx:key="index" style="color:#000;line-height:46px;text-align:center;display:block" decode="{{true}}" >{{item.name}}</text>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
Component({
options: {
// 在组件定义时的选项中启用多slot支持
multipleSlots: true,
},
/**
* 组件的属性列表
*/
properties: {
// 初始化日期
initValue: {
type: String,
value: "",
},
// 父组件传递过来的数据列表
items: {
type: Array,
value: [],
},
Values: {
type: Number,
value:0,
},
},
/**
* 组件的初始数据
*/
data: {
//控制picker的显示与隐藏
flag: true,
// 用户输入的item关键词
searchValue: "",
// 滚动选择的item
setValues: [],
// 滚动选择的item索引
selectIndex: "",
},
/**
* 组件的方法列表
*/
methods: {
/**
* @name: 搜索item
* @date: 20211129
*/
search(e) {
console.log('触发search事件')
let self = this;
self.triggerEvent("handleSearch", e.detail);
},
/**
* @name: 隐藏picker
* @date: 20211129
*/
hiddeDatePicker() {
let self = this;
self.setData({
flag: !self.data.flag,
searchValue: "",
});
},
/**
* @name: 展示picker
* @date: 20211129
*/
showDatePicker() {
let self = this;
self.setData({
flag: !self.data.flag,
});
self.getItems();
},
/**
* @name: 选择好item后,点击确定
* @date: 20211129
*/
confirm() {
let self = this;
// 获取用户选择的item
console.log(self.data.selectIndex, "self.data.selectIndex");
let item = self.data.items[self.data.selectIndex]
? self.data.items[self.data.selectIndex]
: self.data.items[0];
let selectIndex = self.data.selectIndex;
// 通过发送自定义事件把用户选择的item传递到父组件
console.log(item, "itemitem");
//取name 是因为从父组件传来的数据 格式已经处理成name:xxxxx
self.triggerEvent("confirm", {
name: item.name,
toback: item.toback, //传到后台的数据
selectIndex: selectIndex,
});
},
/**
* @name: 用户滚动picker时,获取滚动选择的索引
* @author: camellia
* @date: 20211129
*/
bindChange(e) {
let self = this;
console.log(e, "eee");
self.setData({
// 用户选择的item索引
selectIndex: e.detail.value[0],
});
},
/**
* @name: 获取初始化信息
* @date: 20211130
*/
getItems(e) {
let self = this;
console.log(self.data.items, "获取父组件的item");
console.log(self.data.initValue, "initValue");
console.log(self.data.Values, "Values");
if (self.data.items[0].name) {
self.setData({
setValues: [self.data.Values],
});
} else {
//如果没有数据
self.setData({
setValues: [0],
});
console.log(self.data.setValues,"setValuessetValues")
}
},
},
});
.date-background {
/* position: absolute; */
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 2000;
}
.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;
color:var(--ThemeColor)
}
.pickViewColumn{
height: 900rpx;
/* margin-top: -300rpx; */
/* text-align: center; */
text-align: left;
}
.indicator{
height: 80rpx;
border: 1rpx solid #E5E8E8;
}
{
"component": true,
"usingComponents": {
"van-search": "../../../../miniprogram_npm/@vant/weapp/search/index"
}
}
在引用的页面 wxml上写
<myPicker id="demopicker" items="{{pickerItems}}" Values="{{pickerItemsIndex}}" bindhandleSearch="handleSearch" bindconfirm="confirm"></myPicker>