微信小程序选择框（通用）

供自己之后参考

<view class="select-box">
		<view class="select-current" catchtap="openClose">
			<text class="current-name">{{defaultOption.name}}</text>
		</view>
		<view class="option-list" wx:if="{{isShow}}" catchtap="optionTap">
			<text class="option" wx:for="{{options}}" wx:for-item="item" wx:key="index" wx:for-index="index" data-id="{{item.id}}"
				data-name="{{item.name}}">{{item.name}}
			</text>
		</view>
	</view>

Component({
  properties: {
    options: {
      type: Array,
      value: []
    },
    defaultOption: {
      type: Object,
      value: {}
    },
  },
  data: {
    isShow: false,
  },
  methods: {
    optionTap(e) {
      let dataset = e.target.dataset
      this.setData({
        current: dataset,
        isShow: false
      });
      // 调用父组件方法，并传参
      this.triggerEvent("change", { ...dataset })
    },
    openClose() {
      this.setData({
        isShow: !this.data.isShow
      })
    },
  },
  pageLifetimes: {
    show: function () {
      console.log(this.data.options,'toolNametoolName');
      
    },
    hide: function () {
      // 页面被隐藏
    },
    resize: function (size) {
      // 页面尺寸变化
    }
  },
})

.select-box {
  position: relative;
  width: 100%;
  width: 200rpx;
  background: #3a3a3a;
  border-radius: 10rpx;
  opacity: 0.5;
  z-index: 100;
}

.select-current {
  position: relative;
  width: 100%;
  padding: 0 10rpx;
  line-height: 70rpx;
  border: 1rpx solid #ddd;
  border-radius: 6rpx;
  box-sizing: border-box;
}

.select-current::after {
  position: absolute;
  display: block;
  right: 16rpx;
  top: 30rpx;
  content: '';
  width: 0;
  height: 0;
  border: 10rpx solid transparent;
  border-top: 10rpx solid #999;
}

.current-name {
  display: block;
  width: 85%;
  height: 100%;
  word-wrap: normal;
  overflow: hidden;
  font-size: 30rpx;
  color: #ffffff;
}

.option-list {
  position: absolute;
  left: 0;
  top: 76rpx;
  width: 100%;
  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) inset;
  background: #3a3a3a;
}

.option {
  display: block;
  width: 100%;
  line-height: 70rpx;
  color: #ffffff;
}

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