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

博主： renlmingj
发布时间：2025 年 10 月 14 日
6 次浏览
暂无评论
3922字数
分类：微信小程序

###### 1、wxml

```html

<view class="select-box">
  <view class="select-current" catchtap="openClose" style="opacity: {{isValueOpacity ? '1' : '0'}};">
    <text class="current-name {{fontFamily}}" style="color: {{color}};font-size: {{fontSize}};">{{current.name}}</text>
    <view class="icon_img" wx:if="{{icon}}">
      <image style="width: 100%;height: 100%;" src="{{icon}}" mode="aspectFill"/>
    </view>
  </view>
  <view class="option-list {{placement}}" wx:if="{{isShow}}">
    <text 
      class="option Sans_SansCN"
      wx:for="{{result}}"
      wx:key="id"
      data-id="{{item.id}}"
      data-name="{{item.name}}"
      bindtap="optionTap"
    >{{item.name}}</text>
  </view>
</view>
```

###### 2、wxss

```css
/* common/components/select/index.wxss */
.select-box {
  position: relative;
  width: 100%;
  font-size: 30rpx;
}

.select-current {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.icon_img {
  width: 32rpx;
  height: 32rpx;
}

.current-name {
  display: block;
  width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  font-size: 26rpx;
  color: #2C3345;
}

.option-list {
  position: absolute;
  left: 0;
  width: 100%;
  max-height: 400rpx;
  overflow-y: auto;
  padding: 12rpx 20rpx 10rpx 20rpx;
  border-radius: 6rpx;
  box-sizing: border-box;
  z-index: 99;
  box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.top {
  bottom: 76rpx;
}

.bottom {
  top: 76rpx;
}

.option {
  display: block;
  width: 100%;
  line-height: 70rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 25rpx;
}

.option:last-child {
  border-bottom: none;
}
```

###### 3、js

```js
// common/components/select/index.js
const app = getApp();

Component({
  properties: {
    // 选择数据
    options: {
      type: Array,
      value: []
    },
    // 默认展示值
    defaultOption: {
      type: Object,
      value: {
        id: '0',
        name: '请选择'
      },
      observer(newVal) {
        this.setData({
          current: Object.assign({}, this.data.defaultOption),
        });
      }
    },
    // 数据识别 key
    key: {
      type: String,
      value: 'id'
    },
    // 数据识别值
    text: {
      type: String,
      value: 'name'
    },
    // 选择框位置（可选值 top）
    placement: {
      type: String,
      value: 'bottom'
    },
    // 文字颜色
    color: {
      type: String,
      value: '#000000'
    },
    // 字号
    fontSize: {
      type: String,
      value: '26rpx'
    },
    // 字体包class
    fontFamily: {
      type: String,
      value: 'Sans_SansCN'
    },
    // 右侧的图标
    icon: {
      type: String,
      value: ''
    },
    // 选择时展示值是否改变
    isValue: {
      type: Boolean,
      value: true
    },
    // 是否展示值
    isValueOpacity: {
      type: Boolean,
      value: true
    }
  },
  data: {
    result: [],
    isShow: false,
    current: {}
  },
  methods: {
    optionTap(e) {
      const dataset = e.target.dataset;
      this.setData({
        current: this.properties.isValue ? dataset : this.properties.defaultOption,
        isShow: false
      });
      // 向父组件传递变更事件
      this.triggerEvent("change", {
        ...dataset
      });
    },
    openClose() {
      this.setData({
        isShow: !this.data.isShow
      });
    },
    // 供父组件调用关闭
    close() {
      this.setData({
        isShow: false
      });
    }
  },
  lifetimes: {
    async ready() {
      // 在组件在视图层布局完成后执行
      await getApp().getOnload(this, 0);
      await getApp().getOnShow(this);
    },
    attached() {
      // 属性名称转换
      let result = [];
      if (this.data.key !== 'id' || this.data.text !== 'name') {
        for (let item of this.data.options) {
          let {
            [this.data.key]: id, [this.data.text]: name
          } = item;
          result.push({
            id,
            name
          });
        }
      }
      this.setData({
        current: Object.assign({}, this.data.defaultOption),
        result: result.length ? result : this.data.options
      });
    }
  }
});
```

###### 4、json

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

###### 5、效果图

![作为选项](https://www.renlmingj.cn/usr/uploads/2025/10/3026468371.png)

![作为选择框](https://www.renlmingj.cn/usr/uploads/2025/10/1711571990.png)

最后修改：2025 年 10 月 14 日