uni-app H5自定义下拉选择框

相对于picker组件，picker-view拥有更强的灵活性。当需要对自定义选择的弹出方式和UI表现时，往往需要使用picker-view。

/deep/.uni-picker-view-indicator:after {
	border-bottom: none!important;
} // 去掉选择蒙层的上边框线
/deep/.uni-picker-view-indicator {
    width: 100%;
    height: 94rpx;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20rpx;
}// 更改蒙层样式
/deep/.uni-picker-view-indicator:before{
    border-top: none!important;
}// 去掉选择蒙层的下边框线

简单封装了一个自定下拉框组件 selectBox.vue

<template>
    <view :class="showTiktok?'selectTiktok':'selectTiktok_hiden'" v-if="showTiktok">
	<view class="select_tit" @click="tiktokComfirm">
            <view class="cancel">取消</view>
            <view class="confirms">确认</view>
	</view>
	<picker-view class="select_content" :value="tiktokValue" @change="scrollTiktokValue"
		mask-style="background: transparent;" :indicator-style="indicatorStyle">
            <picker-view-column class="tiktok_content">
                <block v-for="(item,index) in dyNames" :key="item">
                    <view :class="tiktokCurrent==index?'activeCons':'tiktok_cons'">
                        {{item}}
                    </view>
		</block>
            </picker-view-column>
			
	</picker-view>
    </view>
</template>

<script>
    export default{
		props:{
			showTiktok:{
				type:Boolean,
				default:false
			},
			dyNames:{
				type:Array,
				default:()=>[]
			}
		},
		data(){
			return{
				tiktokValue:[0],
				indicatorStyle: `height:94rpx;top:50%`,
				tiktokCurrent:0,
				tiktokIndex:0
			}
		},
		methods:{
			scrollTiktokValue(e){
				this.tiktokCurrent = e.detail.value[0]
			},
			tiktokComfirm(){
				this.tiktokValue = [this.tiktokCurrent]
				let data = {
					showTiktok:false,
					index:this.tiktokCurrent
				}
				this.$emit('getTiktokIndex',data)
			}
		}
	}
</script>

<style lang="less">
	.selectTiktok,
	.selectTiktok_hiden {
		width: 100%;
		height: 600rpx;
		background: #3A3A3A;
		border-radius: 50rpx 50rpx 0 0;
		padding: 42rpx;
		box-sizing: border-box;
		z-index: 210;
		position: fixed;
		bottom: 0;
		left: 0;
		opacity: 0;
		animation: .5s moveTiktok linear forwards;
	
		.select_tit {
			width: 100%;
			height: 84rpx;
			padding: 0 6rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			.cancel,.confirms {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
			}
	
			.confirms {
				font-weight: 500;
			}
		}
	
		.select_content {
			width: 100%;
			height: 312rpx;
			.icon {
				width: 100%;
				height: 94rpx;
				background: rgba(0, 0, 0, 0.3);
				border-radius: 20rpx;
				position: absolute;
				// top: 198rpx;
				top: 118rpx;
				left: 0;
				z-index: 89;
			}	
			.tiktok_content {
				width: 100%;
				position: absolute;
				top: 0;
				// top: -85rpx;
				left: 0;
				z-index: 99;
				/deep/.uni-picker-view-indicator:after {
					border-bottom: none!important;
				}
				/deep/.uni-picker-view-indicator {
					width: 100%;
					height: 94rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 20rpx;
				}
				/deep/.uni-picker-view-indicator:before{
					border-top: none!important;
				}
				.tiktok_cons {
					width: 100%;
					height: 94rpx;
					font-size: 36rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 36rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
					
				.activeCons {
					width: 100%;
					height: 94rpx;
					font-size: 42rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: bold;
					color: #999999;
					line-height: 42rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
	
	.selectTiktok_hiden {
		opacity: 1;
		animation: 1s hiddenTiktok linear forwards;
	
	}
	@keyframes moveTiktok {
		0% {
			opacity: 0;
			transform: translateY(988rpx);
		}
	
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes hiddenTiktok {
		0% {
			opacity: 1;
			transform: translateY(0);
		}
	
		100% {
			opacity: 0;
			transform: translateY(988rpx);
		}
	}
	
</style>

引入：

<template>
    <view @click="getTiktokModel">点击开启下拉框</view>
    <tiktokSelect :showTiktok='showTiktok' :dyNames='dyNames' @getTiktokIndex='confirmTiktok'></tiktokSelect>
</template>
<script>
    export deault{
        components:{
            tiktokSelect:()=>import('@/pages/sp/dataDisplay/tiktokSelectBox.vue')
        },
        data(){
            return{
                showTiktok:false,
            }
        },
        methods:{
            getTiktokModel(){
		this.showTiktok = true			
            },
            confirmTiktok(data){
		this.showTiktok = data.showTiktok
		this.tiktokCurrent = data.index
            },
        }
    }
</script>