小程序自定义下拉框

自定义select组件文件

select.wxml

<view class="page">
  <view class="selectBox" >
		<view class="selectTypeHead" style="justify-content:{{selectBox.length%2==0 ? 'space-around':'space-between' }}">
			<view class="roomType " wx:for="{{selectBox}}" wx:key="index"
			 data-ind="{{index}}" bindtap="bindLevelChange">
				<text>{{item.roomType}}</text>
				<i class="down-arrow"></i>
			</view>
		</view>
	</view>
	<view class="selectItems" wx:if="{{showItems}}">
		<view class="items" wx:for='{{array}}' wx:key="item" data-type="{{item}}" bindtap="selectItem">{{item}}</view>
	</view>
</view>

select.wxss

	
.down-arrow{
	display: inline-block;
	width: 10rpx;
	height: 10rpx;
	border-right: 2rpx solid #999;
	border-bottom: 2rpx solid #999;
	transform: rotate(45deg);
	margin-left: 20rpx;
}
.roomType{
	display: flex;
	align-items: center;
	font-size: 30rpx;
	
}
.selectBox{
	display: flex;
}
.selectTypeHead{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	background-color: #fff;
  width: 100vw;
}
.selectItems{
	background-color: #fff;
	animation:transp 0.5s ease-in-out;
	position: absolute;
	z-index: 2;
	width: 100vw;
}
.items{
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	border-bottom: 1rpx solid #D9D9D9;
}
@keyframes transp {
	from{opacity: 0;}
	to{opacity: 1;}
}

select.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
		roomType:{
			type: String,
			value:"会议室类型"
		},
		selectBox:{
			type: Array,
			value:[]
		}
  },

  /**
   * 组件的初始数据
   */
  data: {
		levelInd:0,
		showItems:false,
		array:[],
		roomType:'',
  },
	
  /**
   * 组件的方法列表
   */
  methods: {
		bindLevelChange(e){
			let index =  e.currentTarget.dataset.ind
			let showItems = true
			let array = this.data.selectBox[index].array
			this.setData({
				showItems: showItems,
				array,
				levelInd:index,
				roomType:''
			})
		},
		selectItem(e){
			// console.log(e.currentTarget.dataset.type)
			let val = e.currentTarget.dataset.type
			this.data.selectBox[this.data.levelInd].roomType = val 
			let selectBox = this.data.selectBox
			let data = {
				type: this.data.levelInd,
				val: val
			}
			this.triggerEvent("bindValue",data)
			
			
			this.setData({
				roomType: val,
				showItems: false,
				selectBox
			})
			
			
		},
  }
})

使用组件的文件中这样写

home.wxml

<view class="page">
  <view class="selectBox">
		<view class="selectTypeHead">
			<selects selectBox="{{selectBox}}" bind:bindValue="bindValue"></selects>
			
		</view>
		
	</view>

</view>

home.wxss

.selectTypeHead{
	display: flex;
	background-color: #fff;
}

home.js

Page({
  /**
   * 页面的初始数据
   */
  data: {
			selectBox:[
				{
					roomType:"会议室类型",
					array:['小型会议室', '中型会议室', '大型会议室']
				},
				{
					roomType:"楼栋选择",
					array:['一号楼','二号楼','三号楼'],
				}
			],
			roomLevel:"",  //当前选择的类型
			builds:"",	//当前选择的楼栋
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

	bindValue(e){
		let type = e.detail.type
		if(type == 0){
			this.data.roomLevel = e.detail.val
		}else{
			this.data.builds = e.detail.val
		}
		console.log(this.data.roomLevel)
		console.log(this.data.builds)
	},
})

效果图

根据不同的选择获取不同的值

添加点击页面空白处收起下拉框

<view class="page">
	<view class="allPage" bindtap="tapPages">  //此句是新加的
		<view class="selectBox" catchtap='showPicker'>
			<view class="selectTypeHead" style="justify-content:{{selectBox.length%2==0 ? 'space-around':'space-between' }}">
				<view class="roomType " wx:for="{{selectBox}}" wx:key="index"
							data-ind="{{index}}" catchtap="bindLevelChange">
					<text>{{item.roomType}}</text>
					<i class="down-arrow"></i>
				</view>
			</view>
		</view>
		<view class="selectItems" wx:if="{{showItems}}">
			<view class="items" wx:for='{{array}}' wx:key="item" data-type="{{item}}" catchtap="selectItem">{{item.name}}</view>
		</view>
	</view>

</view>

css:

.allPage{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 9999;
}
.page{
	height: 88rpx;
	overflow: hidden;
}

js:

	tapPages(){
			this.setData({
				showItems: false,
			})
		},
		showPicker(){
			this.setData({
				showItems: true,
			})
		}

完成,此时点击除了下拉框内容之外的空白处都能将下拉框收起来