微信小程序select下拉组件封装

最新推荐文章于 2025-05-13 00:47:28 发布

原创

最新推荐文章于 2025-05-13 00:47:28 发布 · 2.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序封装

本文介绍如何在微信小程序中封装一个自定义的select下拉组件，以满足设计需求。由于微信小程序的picker组件样式无法调整到理想状态，因此作者根据实际需求封装了一个组件，并展示了子组件的wxml和wxss代码，以及在页面上的使用方法。

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

前言

刚接触微信小程序，之前有使用vue的底子，今天就分享一个自己封装的下拉组件（参考别人的组件按自己需求修改的），个人是不是很喜欢造轮子，如果有现成的都喜欢复制粘贴改改哈哈，都是之前公司养的坏毛病。

需求

项目需要一个下拉框进行数据筛选，微信小程序有提供自己的一个picker，但是跟我们设计需求不一样，微信小程序好像不支持select标签，如果支持，样式也改不到理想状态，所以最终还是封装了个组件。效果如下。

代码

子组件

component/select/select.wxml

<view class='com-selectBox'>
  <view class='com-sContent' bindtap='selectToggle'>
    <view class='com-sTxt'> {
  
  { nowText }}</view>
    <image src='../../img/arrow.png' class='com-sImg' animation="{
  
  {animationData}}"></image>
  </view>
  <view class='com-sList' wx:if="{
  
  {selectShow}}">
    <view wx:for="{
  
  {propArray}}" data-index="{
  <