自定义搜索，菜单栏选择，uniapp，微信小程序

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


        <view class="date-background" v-show="flag">
            <view class='date-gray-background' @click="hiddeDatePicker">
            </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>
                    <view class="place">
                        <view class="place-item" :class="placeActive==index?'place-active':''"
                            v-for="(item,index) in dataSource" :key="item.id" @tap="placeCheck(index)">
                            {{item.title}}
                        </view>
                    </view>
                    <view class="scrollView">
                        <view class="shequitem" :class="shequActive===index?'shequitemActive':''" v-for="(item,index) in list" :key="item.id"
                            @tap="shequItem(index)">
                            {{item.title}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import topbarcom from '@/commen/topbarcom/topbarcom.vue'
    import BASE_URL from '@/config/api.js'
    export default {
        components: {
            topbarcom,
        },
        data() {
            return {
                title: '关于我们',
                searchValue: '',
                flag: false,
                placeActive: 0,
                shequActive: '',
                
                name: '全部社区',
                dataSource: [],
                childArr: [], // 二级分类数据源
                list: [],
                searchList: [],
                listIndex: 0,

            };
        },
        onLoad() {
            this.getAllClassify()
        },
        watch: {
            // 搜索框出现变化
            searchValue(value) {
                if (value !== '') {
                    console.log(123);
                    this.list = this.fuzzyQuery(this.searchList, value)
                } else {
                    console.log('abx');
                    this.list = this.searchList
                }
                // console.log('searchValue改变了', e, this.list);
            }
        },
        methods: {
            // 点击place切换样式
            placeCheck(index) {
                this.searchValue = ''
                this.shequActive=''
                this.placeActive = index
                this.list = [...this.childArr[index]]
                this.searchList = [...this.childArr[index]]
            },
            shequItem(index) {
                this.shequActive = index
                this.name = this.list[index].title
                console.log(this.list[index]);
            },

            // 遍历数组，模糊查询
            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
            },
            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.list = [...this.childArr[0]]
                        this.searchList = [...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);
    }

    .date-container {
        position: absolute;
        width: 100%;
        height: 800rpx;
        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)
    }

    .place {
        display: flex;
        justify-content: space-around;
        height: 100rpx;
        width: 100%;
        line-height: 98rpx;
        font-size: 36rpx;
        color: #070707;

    }

    .place-item {
        width: 120rpx;
        text-align: center;
    }

    .place-active {
        border-bottom: 3rpx solid #000;
    }

    .shequitem {
        width: 100%;
        height: 60rpx;
        margin: 0 auto;
        line-height: 58rpx;
        color: #000;
        border-bottom: 1rpx solid rgb(238, 238, 238);
        text-align: center;
        font-size: 32rpx;
    }

    .shequitemActive {
        background-color: #F6EFDC;
    }
    .searchInput{
        padding: 0 15rpx;
         border: 1rpx solid #707070;
         border-radius: 50rpx;
    }
    .scrollView{
        height: 800rpx;
        width: 100%;
        overflow: scroll;
    }
</style>