小程序自定义下拉框

喜欢ヅ旅行 2022-11-24 14:27 224阅读 0赞

自定义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 ###

### 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)
    	},
    })

效果图  
![在这里插入图片描述][20200806164647903.png]  
根据不同的选择获取不同的值  
![在这里插入图片描述][2020080616473573.png]  
添加点击页面空白处收起下拉框

<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,
    			})
    		}

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

[20200806164647903.png]: /images/20221124/6b8d24a75d3841c6beccf1fd5d8bbf29.png
[2020080616473573.png]: /images/20221124/be0cb2aeccfa4b289fd25b9b297d965e.png