1

2023-03-03 12:11:23 +08:00
commit f8e1a3015b
502 changed files with 57308 additions and 0 deletions
--- a/components/z-navigation/z-navigation.vue
+++ b/components/z-navigation/z-navigation.vue
@@ -0,0 +1,161 @@
+<template>
+	<view>
+		<view class="footer_box" :class="{ footer_bg: bg }">
+			<view v-for="(item, index) of navigationList" :key="index" class="footer_item">
+				<view class="footer_nav_item" @click="onPageJump(item.pagePath)">
+					<image v-if="item.pagePath == path" class="footer_nav_item_image footer_nav_item_image_scale"
+						:src="'/' + item.selectedIconPath" mode="aspectFit"></image>
+					<image v-else class="footer_nav_item_image" :src="'/' + item.iconPath" mode="aspectFit"></image>
+					<text class="footer_nav_item_text"
+						:class="[item.pagePath == path ? 'footer_item_text_active' : '']">{{ item.text }}</text>
+				</view>
+			</view>
+		</view>
+		<view v-if="bg" class="footer_station"></view>
+
+	</view>
+</template>
+<script>
+	export default {
+		props: {
+			bg: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				path: '',
+				navigationList: [{
+						pagePath: 'pages/peanut/home',
+						iconPath: 'static/tab/icon1_n.png',
+						selectedIconPath: 'static/tab/icon1_y.png',
+						text: '首页'
+					},
+					{
+						pagePath: 'pages/peanut/shopping',
+						iconPath: 'static/tab/icon2_n.png',
+						selectedIconPath: 'static/tab/icon2_y.png',
+						text: '购物车'
+					},
+					{
+						pagePath: 'pages/peanut/bookshelf',
+						iconPath: 'static/tab/icon3_n.png',
+						selectedIconPath: 'static/tab/icon3_y.png',
+						text: '我的书架'
+					},
+					{
+						pagePath: 'pages/peanut/mine',
+						iconPath: 'static/tab/icon4_n.png',
+						selectedIconPath: 'static/tab/icon4_y.png',
+						text: '我的'
+					}
+				],
+			};
+		},
+		//第一次加载
+		created() {
+			//获取所有页面
+			let currentPages = getCurrentPages();
+			let page = currentPages[currentPages.length - 1];
+			this.path = page.route;
+		},
+		//方法
+		methods: {
+			onPageJump(url) {
+				if (this.path !== url) {
+					uni.switchTab({
+						url: '/' + url
+					});
+				}
+			},
+		}
+	};
+</script>
+<style lang="scss" scoped>
+	@import '@/style/mixin.scss';
+
+	.footer_station {
+		height: 110rpx;
+		box-sizing: content-box;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.footer_box {
+		height: 110rpx;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		z-index: 502;
+		box-sizing: content-box;
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+
+	.footer_bg {
+		background-color: #FFF;
+		box-shadow: 0 0px 10px 1px #0000001a;
+	}
+
+	.footer_item {
+		position: relative;
+		flex: 1;
+	}
+
+	.footer_nav_item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+	}
+
+	.footer_nav_item:active {
+		background-color: rgba($color: #fff, $alpha: 0.1);
+	}
+
+	.footer_nav_item_text {
+		font-size: 26rpx;
+		color: #909090;
+		margin-top: 6rpx;
+	}
+
+	.footer_nav_item_text_active {
+		color: #f9a633;
+	}
+
+	.footer_nav_item_image {
+		width: 50rpx;
+		height: 50rpx;
+
+	}
+
+	.footer_nav_item_image_scale {
+		animation: mescrollUpRotate 0.6s linear 1;
+	}
+
+	@keyframes mescrollUpRotate {
+		0% {
+			transform: scale(1.2);
+		}
+
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	
+
+	.footer_item_text_active {
+		color: #079307;
+		font-weight: bold;
+	}
+</style>