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

最新推荐文章于 2025-10-30 15:41:14 发布

原创

最新推荐文章于 2025-10-30 15:41:14 发布 · 2.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序封装

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

前言

刚接触微信小程序，之前有使用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="{
  
  {index}}" data-id="{
  
  {item.id}}" wx:key='' class="com-sItem {
  
  {num==item.id?'cur':''}}" bindtap='setText'>{
  
  {item.text}}</view>
  </view>
</view>

component/select/select.wxml

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    propArray: {
      type: Array,
    },
    defalutSelect:{
      type:String
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    selectShow: false, //初始option不显示
    nowText: "请选择", //初始内容
    animationData: {}, //右边箭头的动画
    num: ''
  },
  attached() {
    // 在组件实例进入页面节点树时执行
    this.initSelect();
  },
  /**
   * 组件的方法列表
   */
  methods: {
    initSelect: function () {
      var nowData = this.properties.propArray;
      var seletedID = this.properties.defalutSelect;
      if (seletedID){
        var nowText = nowData.find(obj => obj.id == seletedID).text
        this.setData({
          selectShow: false,
          nowText: nowText,
          num: seletedID
        })
      }
    },　　　 
    //option的显示与否
    selectToggle: function() {
      var nowShow = this.data.selectShow; //获取当前option显示的状态
      //创建动画
      var animation = wx.c