更新记录

1.0.0（2023-06-07） 下载此版本

1.0.0版本 可以筛选下拉框信息

平台兼容性

1.导入并使用

<template>
    <view class="content">
        <view class="liy-content" style="width: 80%;margin: 0 auto;">
            <view class="liy-content-info">
                <view>选择的数据:{{address}}</view>
                <view>选择的数据下标:{{index}}</view>
            </view>
            <view class="liy-content-btn">
                <button @click="open = true">我是点击</button>
            </view>
        </view>
        <liy-select :list="selectList" 
            :open="open" 
            @close="open = false" 
            @change="changeSelect" 
            titleKey="communityName"
            subtitleKey="address"
        ></liy-select>
    </view>
</template>

<script>
    import liySelect from "../../components/liy-select/liy-select.vue"
    export default {
        components: {
            liySelect
        },
        data() {
            return {
                open: false,
                selectList: [{
                    "communityName": "乐彩花园",
                    "address": "乐彩花园(新华路东100米)"
                }, {
                    "communityName": "进行蓉城",
                    "address": "运河城万佳广场(兴隆桥北街)"
                }, {
                    "communityName": "万达华府1、2号院",
                    "address": "万达华府",
                }, {
                    "communityName": "万达华府8--10号楼",
                    "address": "万达华府",
                }, {
                    "communityName": "万达华府2--8号楼",
                    "address": "万达华府",
                }, {
                    "communityName": "万达华府1--3号楼",
                    "address": "万达华府",
                }], //列表
                index: null,
                address: null
            }
        },
        onLoad() {

        },
        methods: {
            changeSelect(item, index) {
                console.log("============数据============");
                console.log(item);
                console.log("============数据============");
                console.log("============排序============");
                console.log(index);
                console.log("============排序============");
                this.index = index;
                this.address = item.communityName;
            }
        }
    }
</script>

<style scoped lang="scss">
    .liy-content {
        .liy-content-info {
            padding-top: 20rpx;
        }

        .liy-content-btn {
            padding-top: 20rpx;
        }
    }
</style>

2.可自定义标题和副标题

selectList: [{
        "communityName": "乐彩花园",
        "address": "乐彩花园(新华路东100米)"
    }, {
        "communityName": "进行蓉城",
        "address": "运河城万佳广场(兴隆桥北街)"
    }, {
        "communityName": "万达华府1、2号院",
        "address": "万达华府",
    }, {
        "communityName": "万达华府8--10号楼",
        "address": "万达华府",
    }, {
        "communityName": "万达华府2--8号楼",
        "address": "万达华府",
    }, {
        "communityName": "万达华府1--3号楼",
        "address": "万达华府",
    }],

3.监听所选

changeSelect(item,index){
    console.log("============数据============");
    console.log(item);
    console.log("============数据============");
    console.log("============排序============");
    console.log(index);
    console.log("============排序============");
    this.index = index;
    this.address = item.communityName;
}

属性说明

#SearchBar Events