cxhxy/addons/foodhelp/uni_app/components/shortcut/shortcut.vue

<template>
	<view class="shortcut">
		<!-- 首页 -->
		<view @tap="onTargetPageFun(0)" :class="'nav-item ' + ( isShow ? 'show_100' : (transparent ? '' : 'hide_100') )">
			<u-icon :size="30" name="home"></u-icon>
		</view>
		<!-- 订单 -->
		<view @tap="onTargetPageFun(1)" :class="'nav-item ' + ( isShow ? 'show_80' : (transparent ? '' : 'hide_80') )">
			<u-icon :size="30" name="order"></u-icon>
		</view>
		<!-- 点单 -->
		<view @tap="onTargetPageFun(2)" :class="'nav-item ' + ( isShow ? 'show_60' : (transparent ? '' : 'hide_60') )">
			<u-icon :size="30" custom-prefix="custom-icon" name="canzhuo"></u-icon>
		</view>
		<!-- 叫号 -->
		<view @tap="onTargetPageFun(3)" :class="'nav-item ' + ( isShow ? 'show_40' : (transparent ? '' : 'hide_40') )">
			<u-icon :size="30" custom-prefix="custom-icon" name="gonggao"></u-icon>
		</view>
		<!-- 我的 -->
		<view @tap="onTargetPageFun(4)" :class="'nav-item ' + ( isShow ? 'show_20' : (transparent ? '' : 'hide_20') )">
			<u-icon :size="30" name="account"></u-icon>
		</view>

		<!-- 显示隐藏开关 -->
		<view @tap="onToggleShowFun" :class="'nav-item nav-item__switch ' + ( isShow ? 'shortcut_click_show' : '' )">
			<u-icon :size="30" name="close" v-if="isShow"></u-icon>
			<u-icon :size="30" name="plus" v-else></u-icon>
		</view>

	</view>
</template>

<script>
	const App = getApp();

	export default {
		data() {
			return {
				// 弹窗显示控制
				isShow: false,
				transparent: true
			};
		},

		components: {},
		props: {
			// 弹窗标题
			title: {
				type: String,
				default: '弹窗标题'
			}
		},
		options: {
			multipleSlots: true // 在组件定义时的选项中启用多slot支持

		},
		methods: {
			/**
			 * 导航菜单切换事件
			 */
			onToggleShowFun(e) {
				this.setData({
					isShow: !this.isShow,
					transparent: false
				});
			},

			/**
			 * 导航页面跳转
			 */
			onTargetPageFun(index) {
				let urls = App.getTabBarLinks();
				App.goTo(urls[index]);
			}

		}
	};
</script>
<style>
	/* 快捷导航 */

	.shortcut {
		position: fixed;
		right: 12px;
		bottom: 250rpx;
		width: 76rpx;
		line-height: 1;
		z-index: 5;
		border-radius: 50%;
	}

	/* 导航菜单元素 */

	.nav-item {
		position: absolute;
		bottom: 0;
		padding: 0;
		width: 76rpx;
		height: 76rpx;
		line-height: 76rpx;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 50%;
		text-align: center;
		transform: rotate(0deg);
		opacity: 0;
	}

	.nav-item text {
		font-size: 40rpx;
	}

	/* 导航开关 */

	.nav-item__switch {
		opacity: 1;
	}

	.shortcut_click_show {
		margin-bottom: 0;
		background: #fa3534;
	}

	/* 显示动画 */
	.show_100 {
		bottom: 480rpx;
		animation: show_100 0.3s forwards;
	}

	.show_80 {
		bottom: 384rpx;
		animation: show_80 0.3s forwards;
	}

	.show_60 {
		bottom: 288rpx;
		animation: show_60 0.3s forwards;
	}

	.show_40 {
		bottom: 192rpx;
		animation: show_40 0.3s forwards;
	}

	.show_20 {
		bottom: 96rpx;
		animation: show_20 0.3s forwards;
	}

	@keyframes show_20 {
		from {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}

		to {
			bottom: 96rpx;
			transform: rotate(360deg);
			opacity: 1;
		}
	}

	@keyframes show_40 {
		from {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}

		to {
			bottom: 192rpx;
			transform: rotate(360deg);
			opacity: 1;
		}
	}

	@keyframes show_60 {
		from {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}

		to {
			bottom: 288rpx;
			transform: rotate(360deg);
			opacity: 1;
		}
	}

	@keyframes show_80 {
		from {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}

		to {
			bottom: 384rpx;
			transform: rotate(360deg);
			opacity: 1;
		}
	}
	
	@keyframes show_100 {
		from {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}
	
		to {
			bottom: 480rpx;
			transform: rotate(360deg);
			opacity: 1;
		}
	}

	/* 隐藏动画 */
	
	.hide_100 {
		bottom: 0;
		animation: hide_100 0.3s;
		opacity: 0;
	}
	
	.hide_80 {
		bottom: 0;
		animation: hide_80 0.3s;
		opacity: 0;
	}

	.hide_60 {
		bottom: 0;
		animation: hide_60 0.3s;
		opacity: 0;
	}

	.hide_40 {
		bottom: 0;
		animation: hide_40 0.3s;
		opacity: 0;
	}

	.hide_20 {
		bottom: 0;
		animation: hide_20 0.3s;
		opacity: 0;
	}

	@keyframes hide_20 {
		from {
			bottom: 96rpx;
			transform: rotate(360deg);
			opacity: 1;
		}

		to {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}
	}

	@keyframes hide_40 {
		from {
			bottom: 192rpx;
			transform: rotate(360deg);
			opacity: 1;
		}

		to {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}
	}

	@keyframes hide_60 {
		from {
			bottom: 288rpx;
			transform: rotate(360deg);
			opacity: 1;
		}

		to {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}
	}

	@keyframes hide_80 {
		from {
			bottom: 384rpx;
			transform: rotate(360deg);
			opacity: 1;
		}

		to {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}
	}
	
	@keyframes hide_100 {
		from {
			bottom: 480rpx;
			transform: rotate(360deg);
			opacity: 1;
		}
	
		to {
			bottom: 0;
			transform: rotate(0deg);
			opacity: 0;
		}
	}
</style>