From d54ff8895e1eeb8162d27f9a231ef0325838003b Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Mon, 27 Apr 2026 15:40:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=90=AD=E5=BB=BA=E4=BA=86tabs?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Discovery/components/FindTabs.vue   | 122 ++++++++++++++++++
 .../components/images/selected_tabs_icon.png  | Bin 0 -> 2807 bytes
 src/pages/Discovery/index.vue                 |  11 +-
 3 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Discovery/components/FindTabs.vue
 create mode 100644 src/pages/Discovery/components/images/selected_tabs_icon.png

diff --git a/src/pages/Discovery/components/FindTabs.vue b/src/pages/Discovery/components/FindTabs.vue
new file mode 100644
index 0000000..30d8476
--- /dev/null
+++ b/src/pages/Discovery/components/FindTabs.vue
@@ -0,0 +1,122 @@
+<template>
+  <view class="find-tabs-wrapper">
+    <scroll-view class="tabs-scroll" scroll-x="true" :scroll-into-view="'tab-' + modelValue" scroll-with-animation="true">
+      <view class="tabs-list">
+        <view
+          v-for="(tab, idx) in tabs"
+          :key="idx"
+          :id="'tab-' + idx"
+          class="tab-item"
+          :class="{ active: modelValue === idx }"
+          @tap="handleSwitch(idx)"
+        >
+          <view class="tab-content">
+            <view class="tab-label">
+              <text class="tab-text">{{ tab.label }}</text>
+              <image v-if="modelValue === idx && indicatorSrc" :src="indicatorSrc" class="tab-indicator" mode="widthFix" />
+            </view>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script setup>
+import indicatorSrc from "./images/selected_tabs_icon.png";
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  tabs: {
+    type: Array,
+    default: () => [
+      { label: '小七孔古桥' },
+      { label: '翠谷瀑布' },
+      { label: '鸳鸯湖' },
+      { label: '天河潭' },
+      { label: '卧龙潭' }
+    ],
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const handleSwitch = (i) => {
+  emit('update:modelValue', i);
+  emit('change', i);
+};
+
+</script>
+
+<style scoped>
+.find-tabs-wrapper {
+  width: 100%;
+  background-color: transparent;
+}
+
+.tabs-scroll {
+  width: 100%;
+} 
+
+.tabs-list {
+  display: flex;
+  align-items: flex-end;
+  height: 50px;
+  gap: 16px;
+  flex-wrap: nowrap;
+  padding: 0 12px;
+}
+
+.tab-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+
+.tab-item:last-child {
+  margin-right: 12px;
+}
+
+.tab-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+}
+
+.tab-label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-text {
+  font-size: 20px;
+  color: rgba(128,140,153,0.9);
+  z-index: 5;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.tab-item.active .tab-text {
+  color: #0b0b0b;
+  font-weight: 800;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 56px;
+  height: auto;
+  z-index: 6;
+}
+
+</style>
diff --git a/src/pages/Discovery/components/images/selected_tabs_icon.png b/src/pages/Discovery/components/images/selected_tabs_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4ae66db46819a9d80d24c4ef2032e43f0903205
GIT binary patch
literal 2807
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
JPDHLkV1mI-J>&oY

literal 0
HcmV?d00001

diff --git a/src/pages/Discovery/index.vue b/src/pages/Discovery/index.vue
index cd27ff3..479a46a 100644
--- a/src/pages/Discovery/index.vue
+++ b/src/pages/Discovery/index.vue
@@ -1,5 +1,6 @@
 <template>
-  <view> 探索发现
+  <view>
+    <FindTabs v-model="activeIndex" @change="handleTabChange" />
    
   </view>
   
@@ -7,5 +8,13 @@
 </template>
 
 <script setup>
+import { ref } from "vue";
+import FindTabs from "./components/FindTabs.vue";
+
+const activeIndex = ref(0);
+
+const handleTabChange = (index) => {
+  activeIndex.value = index;
+};
 
 </script>
\ No newline at end of file