uniapp 下拉效果显示

下拉框的思路

1、通过固定定位 + animation 实现动画效果
2、通过绑定动态绑定类 :class 实现动画的交替

	.anim {
		animation: tobottom 1s ease-in;
		animation-fill-mode: forwards;

	}

	@keyframes tobottom {
		from {
			top: -90px;
		}

		to {
			top: 65px;
		}
	}

2、 通过 animation-fill-mode: forwards; 使动画停在最后一帧

单选框 及 点击相同按钮的样式切换

1、 单选实现：
通过点击事件 使 selectShow=循环索引 并通过动态绑定class 实现 动画的切换 :class="selectShow===index?'selectOne':''"

2、重复点击 通过判断id 是否相同来判断是否点击相同的按钮

<view style="display: flex;justify-content: space-around;">
	<view class="item" v-for="(item,index) in list" :key="index" @click="filterSelect(index,$event)">
		<view :id='index'  :class="selectShow===index?'selectOne':''">
			{{item}}
			<view :class="selectShow===index?'sanjiaoxing':''"></view>
			<view :class="selectShow===index?'duihao':''">
				<u-icon name="checkmark" color="white" size="14"></u-icon>
			</view>
		</view>
	</view>
</view>

// 筛选选择
filterSelect(index, e) {
	if (this.selectShow === -1) {		// 代表没有选中任何按钮
		this.selectShow = index
		this.clickBtn = e.target.id
	} else if (this.clickBtn === e.target.id) { 	// 代表是否点击相同的按钮
		this.selectShow = -1
	} else {			// 两者都不是的情况
		this.selectShow = index
		this.clickBtn = e.target.id
	}

}
},

完整代码：

<template>
	<view>
		<view class="top">
			<view class="date" @click="selectDate" style="width: 33vw;">
				{{date}}
				<u-icon style="margin-left: 5px;" name="arrow-down"></u-icon>
			</view>
			<!--  日期选择器 -->
			<u-picker mode="time" v-model="show" :params="params" @confirm='sure'></u-picker>

			<view class="top-bottom">
				<view>收入￥200<text style="margin-left: 10px;">支出￥50</text></view>
				<view @click="filtrate">筛选 <text class="iconfont icon-shaixuan"></text> </view>
			</view>
		</view>

		<view class="filter" :class="[show1?'anim':'filter',show2?'anim1':'filter']">
			<!-- 油卡过期等 单选 -->
			<view style="display: flex;justify-content: space-around;">
				<view class="item" v-for="(item,index) in list" :key="index" @click="filterSelect(index,$event)">
					<view :id='index' :class="selectShow===index?'selectOne':''">
						{{item}}
						<view :class="selectShow===index?'sanjiaoxing':''"></view>
						<view :class="selectShow===index?'duihao':''">
							<u-icon name="checkmark" color="white" size="14"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 确定 取消按钮 -->
			<view class="btns">
				<view class="btn" @click="show1=!show1,show2=!show1">取消</view>
				<view @click="filtrate" class="btn" style="background-color: rgba(249, 80, 75, 100);color:white">确定
				</view>
			</view>
		</view>


		<!-- 遮罩层 -->

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					'油卡过期退款', '余额提现', '提现退款'
				],
				show1: false,
				show2: false,
				clickBtn: '',
				selectShow: -1,
				date: "",
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false
				},
				show: false
			}
		},
		methods: {
			// 打开日期选择器
			selectDate() {
				this.show = true
			},
			// 日期选择器
			sure(item) {
				console.log(item, '日期')
				this.date = item.year + '年' + item.month + '月'
			},

			// 筛选
			filtrate() {
				// 控制 动画
				this.show1 = !this.show1
				this.show2 = !this.show1

			},
			// 筛选选择
			filterSelect(index, e) {
				if (this.selectShow === -1) {
					this.selectShow = index
					this.clickBtn = e.target.id
				} else if (this.clickBtn === e.target.id) {
					this.selectShow = -1
				} else {
					this.selectShow = index
					this.clickBtn = e.target.id
				}

			}
		},
		mounted() {
			this.date = new Date().getFullYear() + "年" + ((new Date().getMonth() + 1) < 10 ? ('0' + (new Date()
				.getMonth() + 1)) : (new Date().getMonth() + 1)) + '月'
		}
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100vw;
		height: 65px;
		background-color: rgba(248, 248, 248, 100);
		color: rgba(16, 16, 16, 100);
		font-size: 14px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 20px;
	}

	.date {
		color: rgba(36, 36, 36, 100);
		font-size: 17px;
	}

	.top-bottom {
		color: rgba(181, 179, 179, 100);
		font-size: 14px;
		margin-top: 5px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.icon-shaixuan {
		font-size: 15px;
		margin-left: 3px;
	}

	.filter {
		width: 100vw;
		height: 155px;
		background-color: white;
		color: rgba(16, 16, 16, 100);
		position: fixed;
		top: -90px;
		z-index: -1;
	}

	.item {
		margin-top: 25px;
		width: 110px;
		height: 36px;
		background-color: rgba(246, 245, 245, 100);
		line-height: 36px;
		text-align: center;
	}

	.btns {
		position: absolute;
		bottom: 0;
		display: flex;
		width: 100%;

	}

	.btn {
		display: block;
		width: 50%;
		height: 47px;
		border-radius: 2px;
		background-color: rgba(255, 241, 241, 100);
		color: rgba(249, 80, 75, 100);
		display: flex;
		justify-content: center;
		align-items: center;
	}


	.anim {
		animation: tobottom 1s ease-in;
		animation-fill-mode: forwards;

	}

	@keyframes tobottom {
		from {
			top: -90px;
		}

		to {
			top: 65px;
		}
	}


	.anim1 {
		animation: toTop 1s ease-in;
		animation-fill-mode: forwards;

	}

	@keyframes toTop {
		from {
			top: 65px;
		}

		to {
			top: -90px
		}
	}

	.selectOne {
		border-radius: 2px;
		background-color: rgba(255, 241, 241, 100);
		position: relative;
		color: rgba(249, 80, 75, 100);
	}

	.sanjiaoxing {
		position: absolute;
		width: 0;
		height: 0;
		border-bottom: 18px solid #FB706C;
		border-left: 18px solid transparent;
		right: 0;
		bottom: 0;
	}

	.duihao {
		position: absolute;
		right: 2px;
		bottom: 2px;
		display: flex;
		align-items: flex-end;
	}
</style>