uniapp 自定义下拉组件

需求：类似于淘宝京东的分类栏，以及价格排序等等

原理：利用自定义的弹窗+css显示隐藏动画效果+slot来实现

1、先编写好自己需要的模板样式，并将各种传值类的东西定义好

特别注意：app端的slot名称无法动态改变

<template>
	<!-- 条件选择器 -->
	<view class="screens-box">
		<view class="screen-item" v-for="(item,index) in list" :key="index" @click="changeScreen(index,item)">
			<view class="font-size-26" :class="[item.isSelect?'font-color-3':'font-color-646464']">{{item.label}}</view>
			<image :src="item.isSelect?triangle_02:triangle_01" class="triangle"
				:class="[triangleIndex==index?'triangle-180':'triangle-0']"></image>
		</view>
		<!-- 弹窗 -->
		<view class="pop-up flex axle" :style="{height:popHeight,opacity:popOpacity,zIndex:zIndex}" @click="close">
			<view class="contain-box" :style="{transform:'translateY('+translateY+')'}" @click.stop="()=>{}">
				<!-- #ifdef H5  -->
				<slot :name="screenName"></slot>
				<!-- #endif -->
				
				<!-- #ifdef MP -->
				<slot name="{{screenName}}"></slot>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<!-- app端无法动态改变名称 -->
				<slot v-if="screenName==='comprehensive'" name="comprehensive"></slot>
				<slot v-if="screenName==='price'" name="price"></slot>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	import triangle_01 from '@/static/images/triangle_01.png'
	import triangle_02 from '@/static/images/triangle_02.png'
	export default {
		data() {
			return {
				triangle_01,
				triangle_02,
				popHeight: 0,
				popOpacity: 0,
				changeSwitch: false, //切换开关
				translateY: '',
				triangleIndex: null,//选中的分类
				screenName: '',
				zIndex: -1
			}
		},
		mounted() {
			this.getPopHeight()
		},
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		methods: {
			// 关闭
			close() {
				this.changeSwitch = false
				this.popOpacity = 0
				this.translateY = '-100%'
				this.triangleIndex = null
				this.zIndex = -1
			},
			// 切换
			changeScreen(index, item) {
				// console.log('点击', index, item)
				this.screenName = item.name
				// 如果点击相同的tab
				if (this.triangleIndex == index) {
					this.triangleIndex = null
					this.changeSwitch = !this.changeSwitch
				} else {
					this.triangleIndex = index
					this.changeSwitch = true
				}
				// console.log('点击2', this.changeSwitch);
				if (this.changeSwitch) {
					this.popOpacity = 1
					this.translateY = '0'
					this.zIndex = 10
				} else {
					this.popOpacity = 0
					this.translateY = '-100%'
					this.zIndex = -1
				}
				this.$emit('changeScreen', index)
			},
			// 获取遮罩层高度
			getPopHeight() {
				const res = uni.getSystemInfoSync();
				const query = uni.createSelectorQuery().in(this)
				query.select('.pop-up').boundingClientRect(data => {
					this.popHeight = res.windowHeight - data.top + 'px'
				}).exec();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.screens-box {
		height: 90rpx;
		display: flex;
		padding: 0 40rpx;
		position: relative;

		.screen-item {
			display: flex;
			align-items: center;

			&:not(:first-child) {
				margin-left: 60rpx;
			}

			.triangle {
				width: 14rpx;
				height: 8rpx;
				margin-left: 10rpx;
				transition: transform 0.3s;
			}

			.triangle-180 {
				transform: rotate(-180deg);
			}

			.triangle-0 {
				transform: rotate(0deg);
			}
		}

		.pop-up {
			position: absolute;
			width: 100%;
			left: 0;
			right: 0;
			bottom: 0;
			top: 90rpx;
			background: rgba(0, 0, 0, 0.2);
			overflow: hidden;
			transition: opacity 0.3s, z-index 0.3s;
			// border: 1px solid red;

			.contain-box {
				background-color: #fff;
				border-radius: 0px 0px 10rpx 10rpx;
				overflow: hidden;
				transition: transform 0.3s;
				// border: 1px solid red;
			}
		}
	}
</style>

 2、在页面中调用

<!-- 监测仪条件筛选 -->
		<screen :list="screenList" @changeScreen="changeScreen" ref="screen" v-show="tabIndex==0">
			<!-- 综合排序 -->
			<template v-slot:comprehensive>
				<view v-for="(item,index) in comprehensiveList" :key="index" @click="selectComprehensive(item,index)"
					hover-class="hover-class">
					<view class="flex level-between vertical-center state-item">
						<view class="">{{item.label}}</view>
						<icon type="success_no_circle" size="14" color="#42c2a4" v-show="item.isSelect" />
					</view>
					<view class="cut-off"></view>
				</view>
			</template>
			
			<!-- 价格排序 -->
			<template v-slot:price>
				<view v-for="(item,index) in priceList" :key="index" @click="selectPrice(item,index)"
					hover-class="hover-class">
					<view class="flex level-between vertical-center state-item">
						<view class="">{{item.label}}</view>
						<icon type="success_no_circle" size="14" color="#42c2a4" v-show="item.isSelect" />
					</view>
					<view class="cut-off"></view>
				</view>
			</template>
		</screen>

screenList: [{
					label: '综合排序', //综合排序
					isRotate: false,
					isSelect: false,
					name: 'comprehensive'
				}, {
					label: '价格排序', //价格排序
					isRotate: false,
					isSelect: false,
					name: 'price'
				}],
				comprehensiveList: [{
					id: 1,
					label: '综合', //综合
					isSelect: false
				}, {
					id: 2,
					label: '信用', //信用
					isSelect: false
				}, {
					id: 3,
					label: '新品推荐', //新品推荐
					isSelect: false
				}],
				priceList: [{
					id: 1,
					label: '价格升序', //价格升序
					isSelect: false
				}, {
					id: 2,
					label: '价格降序', //价格降序
					isSelect: false
				}],
				tabIndex: 0,
				form: {
					comprehensive: '',
					price:''
				}

3、注意需要设置监听函数

watch: {
			// 监听参数改变，将筛选后的tab状态变成蓝色
			form: {
				handler(newName) {
					// console.log('监听',newName);
					this.screenList.forEach((item, index) => {
						item.isSelect = false
						if (newName[item.name]) {
							item.isSelect = true
							this.$set(this.screenList, index, item)
						}
					})
				},
				deep: true
			},
		},

4、定义的方法

changeScreen(e) {
				this.screenList[e].isRotate = true
			},
			// 选择综合
			selectComprehensive(item, index) {
				// 清空
				this.comprehensiveList.forEach(item => {
					item.isSelect = false
				})
				this.priceList.forEach(item => {
					item.isSelect = false
				})
				item.isSelect = !item.isSelect
				this.$set(this.comprehensiveList, index, item)
				// 赋值监听
				this.form.price=''
				this.form.comprehensive = item.id
				this.confirm()
			},
			//选择价格
			selectPrice(item, index){
				// 清空
				this.priceList.forEach(item => {
					item.isSelect = false
				})
				this.comprehensiveList.forEach(item => {
					item.isSelect = false
				})
				item.isSelect = !item.isSelect
				this.$set(this.priceList, index, item)
				// 赋值监听
				this.form.comprehensive=''
				this.form.price= item.id
				this.confirm()
			},
			// 确定
			confirm() {
				this.$refs.screen.close()
			},

5、最后自己设置的样式

	.cut-off {
		width: 750rpx;
		height: 1rpx;
		border-radius: 0px 0px 1rpx 1rpx;
		background-color: #EBEFF5;
	}

	.state-item {
		padding: 32rpx 30rpx;
		font-size: 28rpx;
		color: #646464;
	}

	.hover-class {
		background: $uni-bg-color-hover;
	}