微信小程序自定义select下拉选择组件

l_yilan

已于 2022-10-30 12:10:14 修改

阅读量4.8k

点赞数 2

分类专栏：微信小程序文章标签：小程序微信

于 2021-08-31 16:47:07 首次发布

本文链接：https://blog.youkuaiyun.com/l_yilan/article/details/120019884

版权

本文介绍了如何在微信小程序中创建一个自定义的select下拉选择组件。通过在components文件夹下新建组件，并分别编写wxml、wxss、js文件来实现组件的功能。选择器使用了字体图标，但可以替换为图片。组件的selectArray数据结构可以根据需求调整。在目标页面引入组件后，可以展示下拉选择效果，包括未下拉和下拉状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序自定义select下拉选择组件

微信小程序原生开发中，常用到的是从底部弹起的滚动选择器（picker),而有些项目需要用到下拉选择，话不多说，下面就可以把下拉选择封装成一个自定义组件：

1.在components文件夹下新建自定义组件select;
2.select文件对应的wxml、wxss、js如下：
wxml

<view class='select-box'>
    <view class='select-con' bindtap='selectTap'>
        <view class='select-txt'>{
  {nowText}}</view>
        <text class="font a-xiangxia1x select-img" animation="{
    {animationData}}"></text>
    </view>
    <view class='select-list' wx:if="{
    {selectShow}}">
        <view wx:for="{
    {selectArray}}" data-index="{
    {index}}" wx:key='item' class='select-item' bindtap='setText'>{
  {item.text}}</view>
    </view>
</view>

以上wxml代码中，下拉选择图标我是用到字体图标iconfont，可以改成自己想要的图片（替换成image）

wxss

.select-box {
   width: 100%;position: relative

最低0.47元/天解锁文章