BJYSYBZ/YSGZYBZ_WXAPP/components/SlideCard/SlideCard.vue

<template>
	<view :class="{'SlideCardBox': true, 'show': (dir == 1), 'hide': (dir == 0)}">
		<view class="toolBox"  @touchstart="touchStartHandle" @touchend="touchEndHandle">
			<view @click="clickHandle" class="tool"></view>
		</view>
		<view class="content" catch:touchmove="true">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	/**
	 * 上滑卡片组件
	 * **/
	 let startClientY = 0;
	 let endClientY = 0;
	export default {
		name:"SlideCard",
		data() {
			return {
				dir: -1	// 0 向下 1 向上
			};
		},
		methods: {
			touchStartHandle(evt){
				if(evt.changedTouches.length > 0){
					startClientY = evt.changedTouches[0].clientY;
				}
			},
			touchEndHandle(evt){
				if(evt.changedTouches.length > 0){
					endClientY = evt.changedTouches[0].clientY;
				}
				this.computedDir();
				console.log(this.dir)
			},
			computedDir(){
				const diff = endClientY - startClientY
				if(diff > 0){ //向下
					this.dir = 0;
				}else if(diff < 0){ //向上
					this.dir = 1;
				}
			}
		}
	}
</script>

<style lang="scss">
.SlideCardBox {
	position: absolute;
	width: 100%;
	height: 50vh;
	bottom: $tabbar-height;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	background-color: #fff;
	z-index: 9;
	overflow: hidden;
	box-shadow: 0px -8px 16px 0px rgba(150,158,178,0.41);
	&:hover {
		transition: height 2s;
	}
	>.toolBox {
		padding: 10px 0px;
		box-sizing: border-box;
		>.tool {
			height: 8px;
			width: 30%;
			margin: auto;
			border-radius: 5px;
			background-color: #CAD3E4;
		}
	}
	>.content {
		padding: 0px 10px;
		box-sizing: border-box;
	}
	&.show {
		animation: showAnima 1s forwards;
	}
	@keyframes showAnima {
		0% {
			height: 28px;
		}
		100% {
			height: 50vh;
		}
	}
	&.hide {
		animation: hideAnima 1s forwards;
	}
	@keyframes hideAnima {
		0% {
			height: 50vh;
		}
		100% {
			height: 28px;
		}
	}
}
</style>