更新记录

1.0.0（2025-08-24） 下载此版本

1、下拉选择框，支持uni-app、uni-app x

2、支持搜索、删除、上拉、下拉

3、支持最大高度设置、选择框、下拉内容字体大小设置、单位rpx适配大多数屏幕

4、支持自定义下拉内容

平台兼容性

uni-app(4.15)

uni-app x(4.41)

其他

写在最前面

小伙伴在使用过程中遇到任何问题或发现功能不足的地方，欢迎随时留言反馈，您的宝贵意见将帮助我持续完善插件功能，在此衷心感谢您的支持与帮助！

sjx-drop-down

一款开箱即用的uni-modules解决方案，无需手动引用即可在页面中直接调用，显著提升开发效率。

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

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

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

Props

Events

代码演示

下拉框

<template>
    <view class="content">
        <sjx-drop-down :local-data="arrData" textField="name" @change="change" filterField="name" :value="currentV">
        </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>

自定义内容

<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>

关于我

1、如有不足或不方便的地方，请指出，我尽快完善。

2、各位小伙伴如果需要其他插件的话，请留言，我会根据实际需求及自身能力完成插件或给出建议。

谢谢大家！