add: 增加迷你导航示例

ijry · Aug 8, 2024 · fbb2867 · fbb2867
1 parent 8b0c71f
commit fbb2867
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git a/src/pages.json b/src/pages.json
@@ -463,6 +463,13 @@
 				"style": {
 					"navigationBarTitleText": "复制"
 				}
+			},
+			{
+				"path" : "navbarMini",
+				"style" : 
+				{
+					"navigationBarTitleText" : ""
+				}
 			}
 		]
 	},

diff --git a/src/pages/componentsD/navbarMini.vue b/src/pages/componentsD/navbarMini.vue
@@ -0,0 +1,95 @@
+<template>
+	<view class="u-page">
+		<up-navbar
+			safeAreaInsetTop
+			fixed
+			:autoBack="true"
+		>
+		</up-navbar>
+		<view class="u-page__item">
+			<text class="u-page__item__title">基础功能</text>
+			<up-navbar
+				homeUrl="/pages/index/index"
+				:safeAreaInsetTop="true"
+				:fixed="true"
+				@leftClick="leftClick"
+			>
+			</up-navbar>
+		</view>
+		<view class="u-page__item">
+			<text class="u-page__item__title">自定义插槽</text>
+			<up-navbar
+				:fixed="false"
+				:safeAreaInsetTop="false"
+			>
+				<template #left>
+					<up-icon
+						name="arrow-left"
+						size="19"
+					></up-icon>
+				</template>
+			</up-navbar>
+		</view>
+		<up-gap height="50"></up-gap>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			navigateBack() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
+			leftClick() {
+				console.log('leftClick');
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	/* #ifndef APP-NVUE */
+	page {
+		background-color: $u-bg-color;
+	}
+	/* #endif */
+	
+	.u-page {
+		padding: 0;
+		flex: 1;
+		background-color: $u-bg-color;
+
+		&__item {
+
+			&__title {
+				color: $u-tips-color;
+				background-color: $u-bg-color;
+				padding: 15px;
+				font-size: 15px;
+
+				&__slot-title {
+					color: $u-primary;
+					font-size: 14px;
+				}
+			}
+		}
+	}
+
+	.u-nav-slot {
+		@include flex;
+		align-items: center;
+		justify-content: space-between;
+		border-width: 0.5px;
+		border-radius: 100px;
+		border-color: $u-border-color;
+		padding: 3px 7px;
+		opacity: 0.8;
+	}
+</style>
diff --git a/src/pages/example/components.config.js b/src/pages/example/components.config.js
@@ -332,6 +332,11 @@ export default [{
             icon: 'navbar',
             title: 'Navbar 导航栏',
             title_en: 'Navbar'
+        }, {
+            path: '/pages/componentsD/navbarMini/navbarMini',
+            icon: 'navbar',
+            title: 'NavbarMini 迷你导航栏',
+            title_en: 'Navbar'
         }, {
             path: '/pages/componentsC/tabs/tabs',
             icon: 'tabs',