下拉、上拉选择器支持搜索、删除、自定义选择内容、任意对象字段映射

996幸存者2025-08-25 14:48

插件地址：ext.dcloud.net.cn/plugin?id=2...

一、前言

在uni-app生态中，uni-data-select作为官方扩展组件虽能满足基础需求，但在实际开发中常面临自定义灵活性不足 、样式适配繁琐等问题。为此，我写了sjx-drop-down插件------一款开箱即用的uni-modules解决方案，无需手动引用即可在页面中直接调用，显著提升开发效率。

插件支持双向滑动选择（上拉/下拉）、删除操作及禁用状态，通过max-height属性精准控制下拉框最大高度，采用rpx单位实现多屏幕完美适配。

创新性引入textField和valueField双属性配置，支持任意对象字段映射，彻底摆脱数据格式限制。

允许开发者通过插槽完全自定义下拉内容，文字大小、组件尺寸均可动态调整，轻松融入项目UI体系。

二、效果预览

三、插件使用

第一步、在插件市场下载并导入该插件到您的项目中

第二步、在项目中使用

ruby 复制代码

<sjx-drop-down :local-data="arrData" textField="name" @change="change" 
    filterField="name" :value="currentV">
</sjx-drop-down>

四、部分代码展示

以自定义下拉样式为例

javascript 复制代码

<template>
    <view class="content">
        <sjx-drop-down :local-data="arrData" textField="name" @change="change" 
                       filterField="name" :value="currentV" :isSelf="true">
            <template v-slot='{data}'>
                <view>
                    <view style="background-color: aquamarine;margin: 5px 0;" 
                          v-for="(item,index) in data" :key="index">
                        {{item.name}}---{{item.value}}---{{index}}
                    </view>
                </view>
            </template>
        </sjx-drop-down>
    </view>
</template>

export default {
    data() {
        return {
            arrData: [],
            currentV: '444'//默认绑定值
        }
    },
    mounted() {
        // 简单模拟接口请求
        setTimeout(() => {
            this.arrData.push({
                name: '测试1',
                value: '111'
            })
            this.arrData.push({
                name: '测试2',
                value: '222'
            })
            this.arrData.push({
                name: '测试3',
                value: '333'
            })
            this.arrData.push({
                name: '测试4',
                value: '444'
            })
        }, 1000)
    },
    methods: {
        change(value, text, item) {
            console.log(value, text, item);
        }
    }
}
</script>

<style>
    .content {
        padding: 20px;
    }
</style>

五、使用注意

数据源中不包含字段text和value或这两个字段不是你想使用的字段时，注意textField、valueField属性的使用
在使用搜索时，注意配置filterField属性的使用
使用自定义下拉内容时，注意添加@change方法

下拉、上拉选择器 支持搜索、删除、自定义选择内容、任意对象字段映射