自定义picker选择器，带搜索功能，uniapp，微信小程序

 

<template>
    <view>
        <text @click="abcd">{{name}}</text>


        <view class="date-background" v-show="flag">
            <view class='date-gray-background' @click="hiddeDatePicker">
                <!-- 搜索出现的社区 -->
                <view class="chaxunjieguo">
                    <text  v-for="(item,index) in list" :key="item.id" @click.stop="chaxunjieguo(item.id)">{{item.title}}</text>
                </view>
            </view>
            <view class='date-container'>
                <view class="transparent">

                    <view class='date-confirm'>
                        <view @click="hiddeDatePicker">取消</view>
                        <input v-model="searchValue" placeholder="请输入要搜索的小区名称" />
                        <view @click="confirm">确定</view>
                    </view>
                    <picker-view indicator-class="indicator" :value="setValues" @change="bindChange"
                        @pickend="bindpickend" indicator-style="height: 100rpx;" mask-style="height:900rpx;"
                        style="width: 100%; height: 90%;position:absolute;bottom:0rpx;text-align:center;background:white">

                        <picker-view-column class="pickViewColumn">
                            <view v-for="item in dataSource" :key="item.id" style="line-height: 104rpx">{{item.title}}
                            </view>
                        </picker-view-column>
                        <picker-view-column class="pickViewColumn" v-show="showSecondColum">
                            <view v-for="item in childArr[0]" :key="item.id" style="line-height: 104rpx">{{item.title}}
                            </view>
                        </picker-view-column>
                        <picker-view-column class="pickViewColumn" v-show="!showSecondColum">
                            <view v-for="item in childArr[1]" :key="item.id" style="line-height: 104rpx">{{item.title}}
                            </view>
                        </picker-view-column>
                        <picker-view-column class="pickViewColumn" v-show="list.lenght">
                            <view v-for="(item,index) in list" :key="index" style="line-height: 104rpx">{{item.title}}
                            </view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import BASE_URL from '@/config/api.js'
    export default {
        components: {
            topbarcom,
        },
        data() {
            return {
                title: '关于我们',
                searchValue: '',
                flag: false,

                name: '全部社区',
                dataSource: [],
                classifyArr: [
                    [],
                    []
                ], // picker - 数据源
                classifyIndex: [0, 0], // picker - 索引
                childArr: [], // 二级分类数据源
                list: [],
                listIndex:0,
            };
        },
        onLoad() {
            this.getAllClassify()
        },
        watch: {
            searchValue(e) {
                let newArr = [...this.childArr[0], ...this.childArr[1]]
                this.list = this.fuzzyQuery(this.childArr[this.listIndex], e)
                // console.log('searchValue改变了', e, this.list);
            }
        },
        methods: {
            fuzzyQuery(list, keyWord) {
                var arr = [];
                for (var i = 0; i < list.length; i++) {
                    if (list[i].title.match(keyWord) != null) {
                        arr.push(list[i]);
                    }
                }
                return arr;
            },
            chaxunjieguo(e){
                console.log(e);
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].id==e) {
                        return this.name = this.list[i].title
                    }
                }
                // this.name=this.list[e].title
            },
            bindChange(e) {
                console.log(e.detail);
                let value = e.detail.value
                
                console.log(value);
                if (e.target.value[0] == 1) {
                    this.listIndex=1
                    this.showSecondColum = false
                    this.name = this.childArr[1][value[2]].title
                    console.log(this.area_id, this.name, '\\\\\\');
                } else {
                    this.listIndex=0
                    this.showSecondColum = true
                    this.name = this.childArr[0][value[1]].title
                    console.log(this.area_id, this.name, '\\\\\\');
                }
            
            },
            abcd() {
                this.flag = true
                this.listIndex=0
            },

            // 获取数据源并分出一级二级
            getAllClassify() {
                uni.request({
                    url: BASE_URL.host + '/area/areaAll',
                    method: 'POST',
                    success: (res) => {
                        console.log(res);
                        this.dataSource = res.data.data
                        let dataLen = this.dataSource.length;
                        for (let i = 0; i < dataLen; i++) {
                            this.childArr.push(this.dataSource[i].children)
                        };
                        this.classifyArr[0] = this.dataSource;
                        this.classifyArr[1] = this.childArr[0]
                    }
                })
            },
            hiddeDatePicker() {
                this.flag = !this.flag
            },
            showDatePicker() {
                this.flag = !this.flag
                this.getItems()
            },
            confirm(e) {
                console.log("确定", e);
                this.flag = !this.flag
            },

            bindpickend() {},


        }
    }
</script>

<style>
    .date-background {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .date-gray-background {
        position: absolute;
        width: 100%;
        top: 183rpx;
        background: rgba(0, 0, 0, .5);
        height: calc(100% - 500rpx);
    }
    .chaxunjieguo{
        width: 100%;
        height: 500rpx;
        overflow: scroll;
        
        color: black;
    }
    .chaxunjieguo text{
        
        display: block;
        text-align: center;
        padding-bottom: 10rpx;
    }
    .date-container {
        position: absolute;
        width: 100%;
        height: 600rpx;
        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: 600rpx;
        /* margin-top: -300rpx; */
    }

    .indicator {
        height: 80rpx;
        /* border: 1rpx solid #E5E8E8; */
    }
</style>