From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目

---
 uview-ui/components/u-navbar/u-navbar.vue |  315 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 315 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-navbar/u-navbar.vue b/uview-ui/components/u-navbar/u-navbar.vue
new file mode 100644
index 0000000..450242e
--- /dev/null
+++ b/uview-ui/components/u-navbar/u-navbar.vue
@@ -0,0 +1,315 @@
+<template>
+	<view class="">
+		<view class="u-navbar" :style="[navbarStyle]" :class="{ 'u-navbar-fixed': isFixed, 'u-border-bottom': borderBottom }">
+			<view class="u-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+			<view class="u-navbar-inner" :style="[navbarInnerStyle]">
+				<view class="u-back-wrap" v-if="isBack" @tap="goBack">
+					<view class="u-icon-wrap">
+						<u-icon :name="backIconName" :color="backIconColor" :size="backIconSize"></u-icon>
+					</view>
+					<view class="u-icon-wrap u-back-text u-line-1" v-if="backText" :style="[backTextStyle]">{{ backText }}</view>
+				</view>
+				<view class="u-navbar-content-title" v-if="title" :style="[titleStyle]">
+					<view
+					    class="u-title u-line-1"
+					    :style="{
+							color: titleColor,
+							fontSize: titleSize + 'rpx',
+							fontWeight: titleBold ? 'bold' : 'normal'
+						}">
+						{{ title }}
+					</view>
+				</view>
+				<view class="u-slot-content">
+					<slot></slot>
+				</view>
+				<view class="u-slot-right">
+					<slot name="right"></slot>
+				</view>
+			</view>
+		</view>
+		<!-- 瑙ｅ喅fixed瀹氫綅鍚庡鑸爮濉岄櫡鐨勯棶棰� -->
+		<view class="u-navbar-placeholder" v-if="isFixed && !immersive" :style="{ width: '100%', height: Number(navbarHeight) + statusBarHeight + 'px' }"></view>
+	</view>
+</template>
+
+<script>
+	// 鑾峰彇绯荤粺鐘舵�佹爮鐨勯珮搴�
+	let systemInfo = uni.getSystemInfoSync();
+	let menuButtonInfo = {};
+	// 濡傛灉鏄皬绋嬪簭锛岃幏鍙栧彸涓婅鑳跺泭鐨勫昂瀵镐俊鎭紝閬垮厤瀵艰埅鏍忓彸渚у唴瀹逛笌鑳跺泭閲嶅彔(鏀粯瀹濆皬绋嬪簭闈炴湰API锛屽皻鏈吋瀹�)
+	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
+	menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+	// #endif
+	/**
+	 * navbar 鑷畾涔夊鑸爮
+	 * @description 姝ょ粍浠朵竴鑸敤浜庡湪鐗规畩鎯呭喌涓嬶紝闇�瑕佽嚜瀹氫箟瀵艰埅鏍忕殑鏃跺�欑敤鍒帮紝涓�鑸缓璁娇鐢╱niapp鑷甫鐨勫鑸爮銆�
+	 * @tutorial https://www.uviewui.com/components/navbar.html
+	 * @property {String Number} height 瀵艰埅鏍忛珮搴�(涓嶅寘鎷姸鎬佹爮楂樺害鍦ㄥ唴锛屽唴閮ㄨ嚜鍔ㄥ姞涓�)锛屾敞鎰忚繖閲岀殑鍗曚綅鏄痯x锛堥粯璁�44锛�
+	 * @property {String} back-icon-color 宸﹁竟杩斿洖鍥炬爣鐨勯鑹诧紙榛樿#606266锛�
+	 * @property {String} back-icon-name 宸﹁竟杩斿洖鍥炬爣鐨勫悕绉帮紝鍙兘涓簎View鑷甫鐨勫浘鏍囷紙榛樿arrow-left锛�
+	 * @property {String Number} back-icon-size 宸﹁竟杩斿洖鍥炬爣鐨勫ぇ灏忥紝鍗曚綅rpx锛堥粯璁�30锛�
+	 * @property {String} back-text 杩斿洖鍥炬爣鍙宠竟鐨勮緟鍔╂彁绀烘枃瀛�
+	 * @property {Object} back-text-style 杩斿洖鍥炬爣鍙宠竟鐨勮緟鍔╂彁绀烘枃瀛楃殑鏍峰紡锛屽璞″舰寮忥紙榛樿{ color: '#606266' }锛�
+	 * @property {String} title 瀵艰埅鏍忔爣棰橈紝濡傝缃负绌哄瓧绗︼紝灏嗕細闅愯棌鏍囬鍗犱綅鍖哄煙
+	 * @property {String Number} title-width 瀵艰埅鏍忔爣棰樼殑鏈�澶у搴︼紝鍐呭瓒呭嚭浼氫互鐪佺暐鍙烽殣钘忥紝鍗曚綅rpx锛堥粯璁�250锛�
+	 * @property {String} title-color 鏍囬鐨勯鑹诧紙榛樿#606266锛�
+	 * @property {String Number} title-size 瀵艰埅鏍忔爣棰樺瓧浣撳ぇ灏忥紝鍗曚綅rpx锛堥粯璁�32锛�
+	 * @property {Function} custom-back 鑷畾涔夎繑鍥為�昏緫鏂规硶
+	 * @property {String Number} z-index 鍥哄畾鍦ㄩ《閮ㄦ椂鐨剒-index鍊硷紙榛樿980锛�
+	 * @property {Boolean} is-back 鏄惁鏄剧ず瀵艰埅鏍忓乏杈硅繑鍥炲浘鏍囧拰杈呭姪鏂囧瓧锛堥粯璁rue锛�
+	 * @property {Object} background 瀵艰埅鏍忚儗鏅缃紝瑙佸畼缃戣鏄庯紙榛樿{ background: '#ffffff' }锛�
+	 * @property {Boolean} is-fixed 瀵艰埅鏍忔槸鍚﹀浐瀹氬湪椤堕儴锛堥粯璁rue锛�
+	 * @property {Boolean} immersive 娌夋蹈寮忥紝鍏佽fixed瀹氫綅鍚庡鑸爮濉岄櫡锛屼粎fixed瀹氫綅涓嬬敓鏁堬紙榛樿false锛�
+	 * @property {Boolean} border-bottom 瀵艰埅鏍忓簳閮ㄦ槸鍚︽樉绀轰笅杈规锛屽瀹氫箟浜嗚緝娣辩殑鑳屾櫙棰滆壊锛屽彲鍙栨秷姝ゅ�硷紙榛樿true锛�
+	 * @example <u-navbar back-text="杩斿洖" title="鍓戞湭閰嶅Ε锛屽嚭闂ㄥ凡鏄睙婀�"></u-navbar>
+	 */
+	export default {
+		name: "u-navbar",
+		props: {
+			// 瀵艰埅鏍忛珮搴︼紝鍗曚綅px锛岄潪rpx
+			height: {
+				type: [String, Number],
+				default: ''
+			},
+			// 杩斿洖绠ご鐨勯鑹�
+			backIconColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 宸﹁竟杩斿洖鐨勫浘鏍�
+			backIconName: {
+				type: String,
+				default: 'nav-back'
+			},
+			// 宸﹁竟杩斿洖鍥炬爣鐨勫ぇ灏忥紝rpx
+			backIconSize: {
+				type: [String, Number],
+				default: '44'
+			},
+			// 杩斿洖鐨勬枃瀛楁彁绀�
+			backText: {
+				type: String,
+				default: ''
+			},
+			// 杩斿洖鐨勬枃瀛楃殑 鏍峰紡
+			backTextStyle: {
+				type: Object,
+				default () {
+					return {
+						color: '#606266'
+					}
+				}
+			},
+			// 瀵艰埅鏍忔爣棰�
+			title: {
+				type: String,
+				default: ''
+			},
+			// 鏍囬鐨勫搴︼紝濡傛灉闇�瑕佽嚜瀹氫箟鍙充晶鍐呭锛屼笖鍙充晶鍐呭寰堝鏃讹紝鍙兘闇�瑕佸噺灏戣繖涓搴︼紝鍗曚綅rpx
+			titleWidth: {
+				type: [String, Number],
+				default: '250'
+			},
+			// 鏍囬鐨勯鑹�
+			titleColor: {
+				type: String,
+				default: '#606266'
+			},
+			// 鏍囬瀛椾綋鏄惁鍔犵矖
+			titleBold: {
+				type: Boolean,
+				default: false
+			},
+			// 鏍囬鐨勫瓧浣撳ぇ灏�
+			titleSize: {
+				type: [String, Number],
+				default: 32
+			},
+			isBack: {
+				type: [Boolean, String],
+				default: true
+			},
+			// 瀵硅薄褰㈠紡锛屽洜涓虹敤鎴峰彲鑳藉畾涔変竴涓函鑹诧紝鎴栬�呯嚎鎬ф笎鍙樼殑棰滆壊
+			background: {
+				type: Object,
+				default () {
+					return {
+						background: '#ffffff'
+					}
+				}
+			},
+			// 瀵艰埅鏍忔槸鍚﹀浐瀹氬湪椤堕儴
+			isFixed: {
+				type: Boolean,
+				default: true
+			},
+			// 鏄惁娌夋蹈寮忥紝鍏佽fixed瀹氫綅鍚庡鑸爮濉岄櫡锛屼粎fixed瀹氫綅涓嬬敓鏁�
+			immersive: {
+				type: Boolean,
+				default: false
+			},
+			// 鏄惁鏄剧ず瀵艰埅鏍忕殑涓嬭竟妗�
+			borderBottom: {
+				type: Boolean,
+				default: true
+			},
+			zIndex: {
+				type: [String, Number],
+				default: ''
+			},
+			// 鑷畾涔夎繑鍥為�昏緫
+			customBack: {
+				type: Function,
+				default: null
+			}
+		},
+		data() {
+			return {
+				menuButtonInfo: menuButtonInfo,
+				statusBarHeight: systemInfo.statusBarHeight
+			};
+		},
+		computed: {
+			// 瀵艰埅鏍忓唴閮ㄧ洅瀛愮殑鏍峰紡
+			navbarInnerStyle() {
+				let style = {};
+				// 瀵艰埅鏍忓搴︼紝濡傛灉鍦ㄥ皬绋嬪簭涓嬶紝瀵艰埅鏍忓搴︿负鑳跺泭鐨勫乏杈瑰埌灞忓箷宸﹁竟鐨勮窛绂�
+				style.height = this.navbarHeight + 'px';
+				// // 濡傛灉鏄悇瀹跺皬绋嬪簭锛屽鑸爮鍐呴儴鐨勫搴﹂渶瑕佸噺灏戝彸杈硅兌鍥婄殑瀹藉害
+				// #ifdef MP
+				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+				style.marginRight = rightButtonWidth + 'px';
+				// #endif
+				return style;
+			},
+			// 鏁翠釜瀵艰埅鏍忕殑鏍峰紡
+			navbarStyle() {
+				let style = {};
+				style.zIndex = this.zIndex ? this.zIndex : this.$u.zIndex.navbar;
+				// 鍚堝苟鐢ㄦ埛浼犻�掔殑鑳屾櫙鑹插璞�
+				Object.assign(style, this.background);
+				return style;
+			},
+			// 瀵艰埅涓棿鐨勬爣棰樼殑鏍峰紡
+			titleStyle() {
+				let style = {};
+				// #ifndef MP
+				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				style.right = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				// #endif
+				// #ifdef MP
+				// 姝ゅ鏄负浜嗚鏍囬鏄剧ず鍖哄煙鍗充娇鍦ㄥ皬绋嬪簭鏈夊彸渚ц兌鍥婄殑鎯呭喌涓嬩篃鑳藉浜庡睆骞曠殑涓棿锛屾槸閫氳繃缁濆瀹氫綅瀹炵幇鐨�
+				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
+				style.left = (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + 'px';
+				style.right = rightButtonWidth - (systemInfo.windowWidth - uni.upx2px(this.titleWidth)) / 2 + rightButtonWidth +
+					'px';
+				// #endif
+				style.width = uni.upx2px(this.titleWidth) + 'px';
+				return style;
+			},
+			// 杞崲瀛楃鏁板�间负鐪熸鐨勬暟鍊�
+			navbarHeight() {
+				// #ifdef APP-PLUS || H5
+				return this.height ? this.height : 44;
+				// #endif
+				// #ifdef MP
+				// 灏忕▼搴忕壒鍒鐞嗭紝璁╁鑸爮楂樺害 = 鑳跺泭楂樺害 + 涓ゅ�嶈兌鍥婇《閮ㄤ笌鐘舵�佹爮搴曢儴鐨勮窛绂讳箣宸�(鐩稿綋浜庡悓鏃惰幏寰椾簡瀵艰埅鏍忓簳閮ㄤ笌鑳跺泭搴曢儴鐨勮窛绂�)
+				// 姝ゆ柟娉曟湁缂洪櫡锛屾殏涓嶇敤(浼氬鑷村皯浜嗗嚑涓猵x)锛岄噰鐢ㄧ洿鎺ュ浐瀹氬�肩殑鏂瑰紡
+				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//瀵艰埅楂樺害
+				let height = systemInfo.platform == 'ios' ? 44 : 48;
+				return this.height ? this.height : height;
+				// #endif
+			}
+		},
+		created() {},
+		methods: {
+			goBack() {
+				// 濡傛灉鑷畾涔変簡鐐瑰嚮杩斿洖鎸夐挳鐨勫嚱鏁帮紝鍒欐墽琛岋紝鍚﹀垯鎵ц杩斿洖閫昏緫
+				if (typeof this.customBack === 'function') {
+					// 鍦ㄥ井淇★紝鏀粯瀹濈瓑鐜(H5姝ｅ父)锛屼細瀵艰嚧鐖剁粍浠跺畾涔夌殑customBack()鍑芥暟浣撲腑鐨則his鍙樻垚瀛愮粍浠剁殑this
+					// 閫氳繃bind()鏂规硶锛岀粦瀹氱埗缁勪欢鐨則his锛岃this.customBack()鐨則his涓虹埗缁勪欢鐨勪笂涓嬫枃
+					this.customBack.bind(this.$u.$parent.call(this))();
+				} else {
+					uni.navigateBack();
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+
+	.u-navbar {
+		width: 100%;
+	}
+
+	.u-navbar-fixed {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		z-index: 991;
+	}
+
+	.u-status-bar {
+		width: 100%;
+	}
+
+	.u-navbar-inner {
+		@include vue-flex;
+		justify-content: space-between;
+		position: relative;
+		align-items: center;
+	}
+
+	.u-back-wrap {
+		@include vue-flex;
+		align-items: center;
+		flex: 1;
+		flex-grow: 0;
+		padding: 14rpx 14rpx 14rpx 24rpx;
+	}
+
+	.u-back-text {
+		padding-left: 4rpx;
+		font-size: 30rpx;
+	}
+
+	.u-navbar-content-title {
+		@include vue-flex;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 60rpx;
+		text-align: center;
+		flex-shrink: 0;
+	}
+
+	.u-navbar-centent-slot {
+		flex: 1;
+	}
+
+	.u-title {
+		line-height: 60rpx;
+		font-size: 32rpx;
+		flex: 1;
+	}
+
+	.u-navbar-right {
+		flex: 1;
+		@include vue-flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.u-slot-content {
+		flex: 1;
+		@include vue-flex;
+		align-items: center;
+	}
+</style>

--
Gitblit v1.9.3