更新记录

1.0.2（2025-08-31） 下载此版本

1、修改uni-app x在android真机中运行bug

2、完善示例及文档

1.0.1（2025-08-26） 下载此版本

1、下拉框中搜索框添加删除

2、默认下拉内容最大尺寸修改为400rpx

3、组件样式调整

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

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

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

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

4、支持自定义下拉内容

平台兼容性

uni-app(4.21)

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 ref='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"
                        @click="myChange(item)">
                        {{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);
        },
        myChange(item) {
            this.$refs.down.change(item)
        },
    }
}
</script>

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

uni-app x中自定义内容

<template>
    <scroll-view style="flex:1">
        <sjx-drop-down ref='down' :local-data="arrData" textField="name" @change="change" filterField="name"
            :value="currentV" :is-self="true">
            <template v-slot='{data}'>
                <view>
                    <view style="background-color: aquamarine;margin: 5px 0;"
                        v-for="(item, index) in data as Array<UTSJSONObject>" :key="index" @click='myChange(item)'>
                        {{item.name}}---{{item.value}}---{{index}}
                    </view>
                </view>
            </template>
        </sjx-drop-down>
        <view style="margin-top: 10px;">其他内容</view>
    </scroll-view>
</template>
<script lang="uts">
    export default {
        data() {
            return {
                title: 'Hello',
                arrData: [] as Array<UTSJSONObject>,
                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: {
            myChange(item : UTSJSONObject) {
                this.$refs.down.change(item)
            },
            change(value : string, text : string, item : UTSJSONObject) {
                console.log(value, text, item);
                this.currentV = value
            }
        }
    }
</script>

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

关于我

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

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

谢谢大家！