小程序——下拉选择框组件

article/2025/10/8 8:38:00

一、效果

在这里插入图片描述

二、说明

最近在开发微信小程序，但是用的lin-ui和@vant 都没有下拉选择框组件。在网上搜索一番后，发现了一个挺简单且很好用的下拉框组件。
链接在这里：https://blog.csdn.net/WeiflR10/article/details/121494131
原文中是直接写入数据，在此基础上我修改了一下，让它成为一个可复用的组件。

三、代码

my_select.js

Component({properties: {title:{type: String,value: ""},nameList: {type: Array,value: [],observer: function(){//有的时候选项组是后端获取数据来的，初始化时可能为[]，所以这里使用obersver，当父组件中值改变时触发this.processData();}},nowId: {type: Number,value: -1},nowName: {type: String,value: "",observer: function(){this.setData({select: this. properties.nowName,selectId: this.properties.nowId,});}},placeholder: {type: String,value: ""}},/*** 页面的初始数据*/data: {selectcontent: [],changable: false, //箭头切换select: undefined, //选中的值selectId: undefined, //选中的id},methods: {// 下拉框收起和展开startChange(e) {this.setData({changable: !this.data.changable})},// 选择数据后回显changecontent(e) {this.setData({select: e.currentTarget.dataset.datavalue.name,selectId: e.currentTarget.dataset.datavalue.id,changable: false})this.triggerEvent("handleChange", {selectId: this.data.selectId, select: this.data.select});//向父组件传参},//处理数据，复制一遍，因为子组件不能直接改变父组件的传进来的值。processData(){let options = [];let that = this;this.properties.nameList.forEach((item) => {options.push({id: item.id,name: item.name,});}); //forEachthis.setData({selectcontent: options,select: that.properties.nowName,selectId: that.properties.nowId,});}}
})

my_select.json

{"component": true,"usingComponents": {}
}

my_select.wxml

需要说明的是这里的箭头icon是使用的lin-ui，使用可以换成你自己用的ui框架或者用静态图片也可以。

<!--pages/components/my_select/my_select.wxml-->
<view class="select_all_view"><!-- 内容说明，可以没有 --><view class="select_title" wx:if="{{title}}">{{title}}</view><view class="select_view"><!-- 输入框 --><view class="inputPlaceholder" bindtap="startChange"><text wx:if='{{select}}'>{{select}}</text><text wx:else="{{select}}">{{placeholder}}</text><view class="jiantou1" wx:if='{{changable}}'><l-icon name="down" size="30" /></view><view class="jiantou1" wx:else='{{changable}}'><l-icon name="left" size="30" /></view></view><!-- 下拉展开后的可选择内容 --><view class="content" wx:if='{{changable}}'><view class="{{item.id==selectId ? 'active':''}}" wx:for="{{selectcontent}}" wx:key="idnex" bindtap="changecontent" data-datavalue="{{item}}">{{item.name}}</view></view></view>
</view>

my_select.wxss

这里z-index:99是为了显示在其他内容之上。但是也承认有一个缺陷是，这个组件如果用在modal里面，显示会有一些问题。

.select_all_view{display: flex;z-index: 999;
}
.select_view{display: inline;
}
.select_title{margin-right: 10rpx;
}
.inputPlaceholder{min-width: 300rpx;height: 45rpx;background-color: rgba(255, 255, 255, 0.5);border: 1px solid #DEDEDE;padding: 4rpx 0rpx 10rpx 10rpx;color: #252525;font-weight: 400;border-radius: 10rpx;position: relative;overflow:hidden;text-overflow: ellipsis;white-space:nowrap;
}
.jiantou1{position: absolute;right: 10rpx;top: 8rpx;
}
.content{position: absolute;z-index: 999;min-width: 280rpx;max-height:270rpx;background: #FFFFFF;box-shadow: 0px 0px 10px 1px rgba(88, 88, 88, 0.8);border-radius: 0 0 5% 5%;padding: 20rpx;overflow-x: hidden;overflow-y: scroll;
}
.content>.inputPlaceholder{padding: 10rpx 0;
}
.select_view .active{color:#46678d;
}

四、使用

先创建一个component，把代码复制过去。
和其他组件一样，需要在使用的page页面的json文件里引入。

 "usingComponents": {"my_select": "path/my_select/my_select"}

然后就能在页面中使用了
示例

example1
<my_select nowId="{{curfId}}"nameList="{{fruits}}" nowName="{{curfruitName}}" placeholder="请选择水果" bind:handleChange="changeFruit">
</my_select>example2
<my_select title="水果"nowId="{{curfId}}"nameList="{{fruits}}" nowName="{{curfruitName}}" placeholder="请选择水果" bind:handleChange="changeFruit">
</my_select>

data: {curfId: 4,fruits: [{name: "苹果" ,id: 1},{name: "西瓜" ,id: 2},{name: "李子" ,id: 3},{name: "梨" ,id: 4}],curfruitName:"梨" ,title: "水果"},changeFruit(e){console.log(e.detail.selectId);console.log(e.detail.select);// process();}

效果图
在这里插入图片描述

api

参数

参数	类型	说明	默认值
title	String	选择框前的说明文字，可以为空	“”
namlist	array	选项的名称和id格式为[{name: “xxx”,id: 1,{name: “xxx”,id: 2}}]。id不可重复	[]
nowId	Number	初始选中选项id	-1
nowName	String	初始选中选项	“”
placeholder	String	未选择时展示的字段	“”