小程序wepy自己写的一个select选择框

效果图，高度固定的可以自己改，滚动条形式

 

调用的页面

<template>
  <view 
        catchtap="openClose">  
<Select2 id="select"
                   
                   :options.sync="group_options"
                   :GroupName.sync="GroupName"
                   @funGroup.user="funGroup"></Select2>
    </view>
</template>

import Select2 from './Select2'
export default class DataSts extends wepy.component {
  components = {  Select2 }
  data = {
 group_options:  [{
          id: '1',
          name: '部门',
          role: '-2'
        }, {
          id: '2',
          name: '分组',
          role: '-1'
        },],
   GroupName: '',
}
  methods = {
   funGroup (e) {
      var item = e.currentTarget.dataset.item
      this.GroupName = item.name
      this.GroupObj = item
      this.$apply()
    },
    openClose () {
      this.$invoke('Select2', 'close')
    },
}

组件 Select2

<style lang="less" scoped>
.select-box {
  z-index: 999;
  position: relative;
  font-size: 30rpx;
}
.select-current {
  display: flex;
  width: auto;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 24rpx;
  color: #6a3b2e;
}

.selDataTime_css {
  margin-left: 10rpx;
}
.select-name {
  position: relative;
  width: 100%;
  padding: 0 10rpx;
  color: rgba(106, 59, 46, 100);
  font-size: 24rpx;
}

.option-list {
  position: absolute;
  display: flex;
  left: 0;
  background-color: rgba(255, 255, 255, 100);
  color: rgba(89, 89, 90, 100);
  font-size: 28rpx;
  z-index: 99;
  background-color: rgba(255, 255, 255, 100);
  color: rgba(89, 89, 90, 100);
  font-size: 28rpx;
  z-index: 99;
  padding-top: 15rpx;
  border-radius: 10rpx;
  text-align: center;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  max-height: 100%;
  width: 150rpx;
  background-color: #fff;
  transition: max-height 0.3s ease-in;
  transform-origin: 50% 0;
  animation: slide-down 0.3s ease-in;
  -webkit-animation: slide-down 0.3s ease-in;
}

.option-list-hidden {
  max-height: 0px;
  overflow: auto;
}
.show {
  background-color: rgba(255, 255, 255, 100);
  color: rgba(89, 89, 90, 100);
  font-size: 28rpx;
  z-index: 99;
  padding-top: 15rpx;
  padding-bottom: 15rpx;
  border-radius: 10rpx;
  text-align: center;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  max-height: 100%;
  width: 150rpx;
  background-color: #fff;
  transition: max-height 0.3s ease-in;
  transform-origin: 50% 0;
  animation: slide-down 0.3s ease-in;
  -webkit-animation: slide-down 0.3s ease-in;
}

.sanjiao {
  width: 0;
  height: 0;
  z-index: 999;
  border-right: 13rpx solid transparent;
  border-left: 13rpx solid transparent;
  border-bottom: 13rpx solid white;
  position: absolute;
  top: -10rpx;
  left: 65rpx;
}
.option-list-jz {
  display: flex;
  justify-content: center;
}
.option-list-wai {
  position: absolute;
}
.option_txt {
  display: block;
  width: 100%;
  line-height: 48rpx;

  color: black;
  font-size: 28rpx;
}
.sel_option_txt {
  width: 80%;
  margin: 0 auto;
  border-bottom: 1rpx solid #e9dad3;
}

.option:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.imgSel {
  height: 30rpx;
  width: 30rpx;
}
.imgSel2 {
  height: 30rpx;
  width: 30rpx;
  transform: rotatex(180deg);
}
.imgSel_jz {
  display: flex;
  align-items: center;
}
@keyframes slide-down {
  0% {
    transform: scale(1, 0);
  }
  100% {
    transform: scale(1, 1);
  }
}

@-webkit-keyframes slide-down {
  0% {
    -webkit-transform: scale(1, 0);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}
</style>

<template>
  <view class="select-box">
    <view class="select-current"
          catchtap="openClose">
      <view> {{GroupName}}</view>
      <view class="imgSel_jz">
        <image wx:if="{{isShow}}"
               mode="widthFix"
               src="https://cdn.ylnhome.com/tuike/select_icon.png"
               class="imgSel2"></image>
        <image wx:if="{{!isShow}}"
               mode="widthFix"
               src="https://cdn.ylnhome.com/tuike/select_icon.png"
               class="imgSel"></image>
      </view>
    </view>
    <view class="option-list-jz">
      <view class="option-list-wai">
        <view class="sanjiao"
              wx:if="{{isShow}}"></view>
        <view style="height: auto;"
              class="{{isShow?'show':'option-list-hidden'}}">
          <view wx:for="{{options}}"
                wx:key="{{item.id}}"
                data-item="{{item}}"
                catchtap="optionTap">
            <!-- <view class="option_txt {{item.name==selDataName?'sel_option_txt':''}}"> -->
            <view class="option_txt">
              {{item.name}}
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>

</template>

<script>
import wepy from 'wepy'
export default class Select2 extends wepy.component {
  props = {
    options: {
      type: Array,
      value: []
    },
    GroupName: {
      type: String,
      value: ''
    },
  }
  data = {
    isShow: false,
  }

  methods = {
    optionTap (e) {
      var name = e.currentTarget.dataset.item.name
      this.GroupName = name
      this.isShow = false
      this.$apply()
      this.$emit('funGroup', e);
    },
    openClose () {
      this.isShow = !this.isShow
      this.$apply()
    },
    // 此方法供父组件调用
    close () {
      this.isShow = false
      this.$apply()
    }
  }

  onLoad () {
  }


}


</script>