uniapp 实现类似淘宝的下拉筛选框

一、效果图

二、代码实现

<template>
	<view class='productList'>
		<view class="pro_select_content">
			<view class="select_item" @click="showSelectPopup(index)" v-for="(item,index) in 8" :class="selectTitleItem == index ? 'showSelect' : ''">
				<view>类别</view>
				<image :src="selectTitleItem == index ? activitySrc : defaultSrc" mode=""></image>
			</view>
		</view>
		<view class="pro_list">
			<view class="pro_list_item" v-for="item in 5">产品列表{{item}}</view>
		</view>
		<uni-popup class="select_popup" ref="selectPopup" :mask-click="false">
			<view class="selectPopup">
				<view class="select_popup_list">
					<view class="select_popup_item" @click="itemChoosed(item,index)" v-for="(item,index) in 7">
						<text :style="{'color': (choosedList.indexOf(item) != -1 ? '#FC7314':'#333333')}">{{item}}</text>
						<image v-show="choosedList.indexOf(item) != -1 ? itemChoose : itemNotChoose " src="../../static/image/icons/select_choosed.png" mode=""></image>
					</view>
				</view>
				<view class="select_btn">
					<text @click="resetChoosedList">重置</text>
					<text class="on" @click="submit">确定</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			selectTitleItem:-1,
			activitySrc:'../../static/image/icons/arrow-top.png',
			defaultSrc:'../../static/image/icons/arrow_bottom.png',
			choosedList:[]
			itemChoose:true,
			itemNotChoose:false,
			choosedItem:-1,
		}
	},
	onLoad(options) {
		
	},
	onReady() {
		
	},
	methods: {
		//筛选列表
		showSelectPopup(index){
			this.$refs.selectPopup.open('top')
			this.selectTitleItem = index
		},
		itemChoosed(item,index){
			this.choosedItem = index
			if(this.choosedList.indexOf(item) !== -1){
				this.choosedList.splice(this.choosedList.indexOf(item),1)
			} else {
				this.choosedList.push(item)
			}
			console.log(this.choosedList)
		},
		//点击重置按钮
		resetChoosedList(){
			this.choosedList = []
		},
		//点击确定按钮
		submit(){
			this.$refs.selectPopup.close()
		}
	}
}
</script>

<style scoped lang="scss">
.productList{
	background-color: #F8F8F8;
	padding: 20upx 0 0;
	.pro_select_content{
		width: calc(100% - 48upx);
		padding: 23upx 24upx 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		overflow-x: auto;
		position: fixed;
		top: 127upx;
		left: 0;
		z-index: 999;
		.select_item{
			flex-shrink: 0;
			white-space: nowrap;
			padding: 10upx 23upx;
			background-color: #F5F5F5;
			border-radius: 10upx;
			margin:0 22upx 23upx 0;
			font-size: 26upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			display: flex;
			align-items: center;
			margin-right: 12upx;
			cursor: pointer;
			image{
				width: 16upx;
				height: 16upx;
				margin-left: 12upx;
			}
		}
		.select_item.on{
			border: 1px solid #FF9045;
			background-color:rgba(255,144,69,0.2);
			color: #FC7314;
		}
		.select_item.showSelect{
			margin:0 22upx 0 0;
		}
	}
	.pro_list{
		width: calc(100% - 48upx);
		padding: 24upx 24upx;
		background-color: #FFFFFF;
		margin-top: 230upx;
		.pro_list_item{
			width: 100%;
			display: flex;
			align-items: center;
			position: relative;
			margin-bottom: 22upx;
			overflow: hidden;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: $uni-prolist-color-title;
			line-height: 34upx;
		}
	}
	.select_popup{
		.selectPopup{
			width: calc(100% - 54upx);
			max-height: 382upx;
			padding: 29upx 27upx 39upx;
			background-color: #F5F5F5;
			border-radius: 5upx 5upx 15upx 20upx;
			margin-top: 206upx;
			.select_popup_list{
				width: 100%;
				height:282upx;
				overflow-y: auto;
				display: flex;
				flex-wrap: wrap;
				.select_popup_item{
					cursor: pointer;
					width: 50%;
					display: flex;
					align-items: center;
					text{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 400;
						// color: #333333;
						line-height: 56upx;
					}
					image{
						width: 30upx;
						height: 30upx;
						margin-left: 22upx;
					}
				}
			}
			.select_btn{
				width: 570upx;
				height: 60upx;
				border: 1upx solid #FF9045;
				border-radius: 15upx;
				margin: 40upx auto 0;
				display: flex;
				overflow: hidden;
				cursor: pointer;
				text{
					cursor: pointer;
					display: inline-block;
					width: 286upx;
					height: 100%;
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FF9045;
					line-height: 60upx;
					text-align: center;
				}
				text.on{
					background: linear-gradient(90deg, #FFB267, #FF9045);
					color: #FFFFFF;
				}
			}
		}
	}
}
</style>

总结

主要是实现类似淘宝app的下拉选择框，样式是自己定义的，用到的组件是uniapp的弹出层组件