微信小程序自定义select组件

Select组件

wxss文件

.select-box {
  position: relative;
  /* width: 100%; */
  /* font-size: 30rpx; */
}

.select-current {
  width: 730rpx;
  height: 45rpx;
  background-color: white;
  margin-left: 10rpx;
  position: relative;
  padding: 0rpx 10rpx;
  /* line-height: 40rpx; */
  /* border: 1rpx solid #ddd; */
  border-radius: 10rpx;
  box-sizing: border-box;
}

.select-current::after {
  position: absolute;
  display: block;
  right: 16rpx;
  top: 18rpx;
  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;
}

.option-list {
  width: 730rpx;
  margin-left: 10rpx;
  position: absolute;
  left: 0;
  top: 45rpx;
  padding: 5rpx 10rpx;
  box-sizing: border-box;
  z-index: 2;
  box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;
  background-color: #fff;
}

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

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

wxml文件

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

json文件

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

js文件 ：数据可以在这定义也可以去用的页面的js文件里定义

Component({
  properties: {
    options: {
      type: Array,
      value: []
    },
    defaultOption: {
      type: Object,
      value: {
        // id: '000',
        // name: '请选择业务类型'
      }
    },
    // properties中的 key 和 text 是为了做属性名转换
    key: {
      type: String,
      value: 'id'
    },
    text: {
      type: String,
      value: 'name'
    }
    },
  data: {
    result: [],
    isShow: false,
    current: {}
  },
  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
      })
    },
    
    // 此方法供父组件调用
    close() {
      this.setData({
      isShow: false
      })
    }
  },
  lifetimes: {
    attached() {
      // 属性名称转换, 如果不是 { id: '', name:'' } 格式，则转为 { id: '', name:'' } 格式
      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
      })
    }
    }
 })

使用页面

// pages/home/home.js
Page({
  data: {
    defaultOptionBusiness:{
      id:'0',
      name:'请选择'
    },
    optionsBusiness:[
      {
        city_id: '1',
        city_name: '111'
      }, 
      {
        city_id: '2',
        city_name: '2222'
      }
    ],
  },

})

wxml

    <!-- 自定义选择select组件 -->
    <select 
      class="fontColor" 
      defaultOption="{{defaultOptionBusiness}}" 
      options="{{optionsBusiness}}" 
      key="city_id" 
      text="city_name" 
      bind:change="change"
    ></select>

json文件

{
  "usingComponents": {
    "select": "../../components/Select/Select"
  },
}

参考文章找不到了