From 3bff34c3aa7ad412042272ea6a37b7d5b49b8d9b Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期四, 26 六月 2025 09:09:51 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/dev' into dev
---
components/TopBar.vue | 147 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 147 insertions(+), 0 deletions(-)
diff --git a/components/TopBar.vue b/components/TopBar.vue
new file mode 100644
index 0000000..b1d6ffe
--- /dev/null
+++ b/components/TopBar.vue
@@ -0,0 +1,147 @@
+<template>
+ <view class="top-bar" :style="{paddingTop: statusBarHeight + 'px'}">
+ <view class="top-bar-content">
+ <!-- 鏍囬鍒楄〃 -->
+ <scroll-view class="title-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
+ <view class="title-container">
+ <view
+ v-for="(item, index) in titleList"
+ :key="index"
+ :class="{active: selectedTitleIndex === item.index, 'title-item': true}"
+ :style="{color: textColor}"
+ @click="changeTab(item)"
+ >
+ <text>{{item.title}}</text>
+ <view class="underline" :style="{backgroundColor: textColor}" v-if="selectedTitleIndex === item.index"></view>
+ </view>
+ </view>
+ </scroll-view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default {
+ name:"TopBar",
+ props: {
+ selectedTitleIndex: {
+ type: String,
+ default: 'home'
+ },
+ textColor: {
+ type: String,
+ default: 'white'
+ }
+ },
+ data() {
+ return {
+ statusBarHeight: 0,
+ scrollLeft: 0,
+ titleList: [
+ {
+ index: 'home',
+ pagePath: '/pages/tabbar/index/home',
+ title: '鎺ㄨ崘'
+ },
+ {
+ index: 'shop',
+ pagePath: '/pages/commodity-square/commoditySquare',
+ title: '鍟嗗搧骞垮満'
+ },
+ {
+ index: 'activity',
+ pagePath: '/pages/mine/activity/reportActivity',
+ title: '娲诲姩'
+ },
+ {
+ index: 'health',
+ pagePath: '/pages/health/healthVideo',
+ title: '澶у仴搴�'
+ }
+ ]
+ };
+ },
+ created() {
+ // 鑾峰彇鐘舵�佹爮楂樺害
+ const systemInfo = uni.getSystemInfoSync();
+ this.statusBarHeight = systemInfo.statusBarHeight;
+ },
+ methods: {
+ changeTab(titleObj) {
+ console.log("鐐瑰嚮椤堕儴瀵艰埅", titleObj);
+ if (titleObj.index !== this.selectedTitleIndex) {
+ this.$emit("changeTab", titleObj);
+ // 璁＄畻婊氬姩浣嶇疆浣垮綋鍓嶉�変腑椤瑰眳涓�
+ this.$nextTick(() => {
+ const query = uni.createSelectorQuery().in(this);
+ query.select(`.title-item[data-index="${titleObj.index}"]`).boundingClientRect();
+ query.select('.title-scroll').boundingClientRect();
+ query.exec(res => {
+ if (res[0] && res[1]) {
+ const itemLeft = res[0].left;
+ const scrollWidth = res[1].width;
+ const itemWidth = res[0].width;
+ this.scrollLeft = itemLeft - (scrollWidth - itemWidth) / 2;
+ }
+ });
+ });
+ }
+ }
+ }
+ }
+</script>
+
+<style>
+ .top-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 999;
+ }
+
+ .top-bar .top-bar-content {
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ }
+
+ .top-bar .title-scroll {
+ width: 100%;
+ height: 80rpx;
+ white-space: nowrap;
+ }
+
+ .top-bar .title-scroll .title-container {
+ display: inline-flex;
+ height: 100%;
+ align-items: center;
+ }
+
+ .top-bar .title-scroll .title-container .title-item {
+ position: relative;
+ padding: 0 24rpx;
+ font-size: 32rpx;
+ /* color: white; */
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ }
+
+ .top-bar .title-scroll .title-container .title-item.active {
+ font-weight: 500;
+ }
+
+ .top-bar .title-scroll .title-container .title-item.active .underline {
+ position: absolute;
+ bottom: 4rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ width: calc(100% - 76rpx);
+ height: 4rpx;
+ /* background-color: white; */
+ border-radius: 4rpx;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.8.0