first

2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
--- a/components/JeepayCustomNavbar/JeepayCustomNavbar.vue
+++ b/components/JeepayCustomNavbar/JeepayCustomNavbar.vue
@@ -0,0 +1,159 @@
+<!--
+  组件功能：  自定义导航栏包裹	, 基于：   uni-nav-bar 的封装。 
+  1. pages.json : "navigationStyle": "custom"
+  2. 页面引入该组件。 
+  3. 如果背景透明并且需要下滑变默认背景色。 需要在页面实现： onPageScroll函数（可以空函数）， 否则该组件无法正常监听。 
+  
+  
+  示例： 
+  
+ 背景通铺效果 
+  <JeepayCustomNavbar :transparent="true" bgDefaultColor='#b6a3a3' title="背景通铺效果" backCtrl="back" ></JeepayCustomNavbar>
+  import { onPageScroll } from '@dcloudio/uni-app'
+  onPageScroll(() => {})
+  
+纯色导航条
+<JeepayCustomNavbar :transparent="false" bgDefaultColor='#ffaa7f' title="纯色导航条" backCtrl="back"></JeepayCustomNavbar>
+			  
+自定义左上角 效果
+<JeepayCustomNavbar :transparent="true" bgDefaultColor='#ff557f' title="自定义左上角" backCtrl="back">
+		  <view> 选择门店（自定义导航条内容） </view>
+</JeepayCustomNavbar>
+
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/11/18 14:32
+-->
+<template>
+	<view>
+		<uni-nav-bar 
+		fixed 
+		:statusBar="true" 
+		:border="false" 
+		:height="props.height" 
+		:backgroundColor="vdata.backgroundColor" 
+		leftWidth="100%"
+		>
+		<!-- 使用左侧插槽  100%宽度  -->
+		<template #left>
+			<view class="left-slot-view">
+				<slot>
+					<view class="nav-bar-box">
+						<view>
+							<!-- 左侧按钮 -->
+							<uni-icons v-if="props.backCtrl" class="left-back" @click="backFunc" :type="props.backIcon" size="20" :color="props.textColor"></uni-icons>
+						</view>
+						
+						<!-- 标题 -->
+						<view class="text" :style="{ color: props.textColor }"> {{props.title}} </view>
+					</view>
+				</slot>
+			 </view>
+		</template>
+		 </uni-nav-bar>
+		 
+	</view>
+</template>
+
+<script setup>
+import { onPageScroll } from '@dcloudio/uni-app'
+import { reactive, ref, onMounted } from 'vue'
+import ak from '@/commons/utils/ak.js'
+
+// 定义组件参数 
+const props = defineProps({
+	
+  // 标题
+  title: { type: String, default: '' },
+  
+  // 文字颜色
+  textColor: { type: String, default: 'black' },
+	
+  // 返回按钮类型
+  backIcon: { type: String, default: 'back' },
+	
+  // 高度： 默认与uni-nav-bar 保持一致。 
+  height: { type: Number, default: 44 },
+  
+  // 默认背景色： 
+  bgDefaultColor: { type: String, default: 'white' },
+  
+  // 是否默认透明（此时可自定义背景）， 当滑动时将切换为默认背景色。 
+  transparent: { type: Boolean, default: false },
+  
+  // 返回按钮的操作项：  null-无返回按钮， back 返回上一页， pageUrl: '', 也可以是回调函数。 
+  backCtrl: [ String, Function ],
+  
+})
+
+// 只有透明色时 才需要监听
+if(props.transparent){
+	
+	onPageScroll((e) => { // 切换背景颜色 透明 or 主题色。 
+		if(e.scrollTop > (props.height / 2.5) ){
+			vdata.backgroundColor = props.bgDefaultColor
+		}else{
+			vdata.backgroundColor = 'transparent'
+		}
+	})
+}
+
+// 颜色 
+const vdata = reactive({
+	backgroundColor: 'transparent' // 默认透明色
+})
+
+
+onMounted(() => {
+	// 当非透明色， 需要改为默认颜色 
+	if(!props.transparent){
+		vdata.backgroundColor = props.bgDefaultColor + '';
+	}
+})
+
+// 点击返回按钮， 
+function backFunc(){
+	
+	if(!props.backCtrl){
+		return false;
+	}
+	
+	if(typeof props.backCtrl == 'function'){
+		return props.backCtrl()
+	}
+	
+	if(props.backCtrl === 'back'){
+		return ak.go.back()
+	}
+}
+
+</script>
+<style scoped lang="scss">
+	.left-slot-view { 
+		display: flex;
+		align-items: center;
+		width: 100%; 
+		height: 100%; 
+		line-height: 100%;
+		font-size: 33rpx;
+		font-weight: 500;
+		.nav-bar-box {
+			display: flex;
+			flex-grow: 1;
+			justify-content: space-between;
+			.left-back {
+				position: absolute;
+			}
+			&::after {
+				content: "";
+			}
+		}
+		
+	}
+	::v-deep.uni-navbar__header {
+		.uni-navbar__header-container,
+		.uni-navbar__header-btns-right {
+			display: none !important;
+		}
+	}
+</style>