From ab47b68b874b2af77c17b78534c47de5a18a2d48 Mon Sep 17 00:00:00 2001
From: xuqingkai <xuqingkai@hd123.com>
Date: Mon, 20 May 2024 13:25:11 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=99=BB=EF=B8=8F=20=20=E7=B4=A2?=
 =?UTF-8?q?=E5=BC=95=E6=A0=8F=E6=94=AF=E6=8C=81=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E6=BB=91=E5=8A=A8=E6=97=B6=E5=90=8C=E6=AD=A5=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vitepress/config.mts                    |  4 ++--
 docs/component/{indexBar.md => index-bar.md}  | 21 +++----------------
 src/pages/indexBar/Index.vue                  | 18 ++--------------
 .../components/wd-index-anchor/index.scss     | 16 +-------------
 .../wd-index-anchor/wd-index-anchor.vue       | 14 ++++++-------
 .../components/wd-index-bar/wd-index-bar.vue  |  4 ++++
 6 files changed, 19 insertions(+), 58 deletions(-)
 rename docs/component/{indexBar.md => index-bar.md} (90%)

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 77392d4d..dce292e9 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2023-07-27 10:26:09
- * @LastEditTime: 2024-05-07 17:05:08
+ * @LastEditTime: 2024-05-20 13:18:53
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\docs\.vitepress\config.mts
@@ -251,7 +251,7 @@ export default defineConfig({
             link: "/component/backtop",
             text: "Backtop 回到顶部"
           }, {
-            link: "/component/indexBar",
+            link: "/component/index-bar",
             text: "IndexBar 索引栏"
           }]
         }, {
diff --git a/docs/component/indexBar.md b/docs/component/index-bar.md
similarity index 90%
rename from docs/component/indexBar.md
rename to docs/component/index-bar.md
index fac7fd9c..f3d23b0d 100644
--- a/docs/component/indexBar.md
+++ b/docs/component/index-bar.md
@@ -13,10 +13,10 @@
 ```vue
 <template>
   <view class="wraper">
-    <wd-index-bar>
-      <view v-for="item in data" :key="item.index" class="city-wrap">
+    <wd-index-bar sticky>
+      <view v-for="item in data" :key="item.index">
         <wd-index-anchor :index="item.index" />
-        <view v-for="city in item.data" class="city" :key="city">{{ city }}</view>
+        <wd-cell border clickable v-for="city in item.data" :key="city" :title="city" @click="handleClick(item.index, city)"></wd-cell>
       </view>
     </wd-index-bar>
   </view>
@@ -117,26 +117,11 @@ const data = ref([
 </script>
 
 <style lang="scss">
-.city {
-  padding: 20px;
-  font-size: 14px;
-  color: black;
-  border-bottom: 1px solid #ddd;
-}
-
 .wraper {
   height: calc(100vh - var(--window-top));
   height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
   height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
 }
-
-
-.wot-theme-dark {
-  .city {
-    color: white;
-    border-bottom-color: #666;
-  }
-}
 </style>
 ```
 
diff --git a/src/pages/indexBar/Index.vue b/src/pages/indexBar/Index.vue
index fd7a5f24..3d4994a4 100644
--- a/src/pages/indexBar/Index.vue
+++ b/src/pages/indexBar/Index.vue
@@ -2,9 +2,9 @@
   <page-wraper>
     <view class="wraper">
       <wd-index-bar sticky>
-        <view v-for="item in data" :key="item.index" class="city-wrap">
+        <view v-for="item in data" :key="item.index">
           <wd-index-anchor :index="item.index" />
-          <view v-for="city in item.data" class="city" :key="city" @click="handleClick(item.index, city)">{{ city }}</view>
+          <wd-cell border clickable v-for="city in item.data" :key="city" :title="city" @click="handleClick(item.index, city)"></wd-cell>
         </view>
       </wd-index-bar>
     </view>
@@ -111,23 +111,9 @@ function handleClick(index: string, city: string) {
 </script>
 
 <style lang="scss">
-.city {
-  padding: 20px;
-  font-size: 14px;
-  color: black;
-  border-bottom: 1px solid #ddd;
-}
-
 .wraper {
   height: calc(100vh - var(--window-top));
   height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom));
   height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
 }
-
-.wot-theme-dark {
-  .city {
-    color: white;
-    border-bottom-color: #666;
-  }
-}
 </style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-anchor/index.scss b/src/uni_modules/wot-design-uni/components/wd-index-anchor/index.scss
index 5804d3d4..f0a1ac61 100644
--- a/src/uni_modules/wot-design-uni/components/wd-index-anchor/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-index-anchor/index.scss
@@ -21,21 +21,7 @@
 // #endif
 
 @include b(index-anchor) {
-  background-color: $-color-gray-3;
-  padding: 10px;
-  font-size: 14px;
-  color: $-color-title;
-
-  @include when(sticky){
-    position: sticky;
-    top: 0;
-    left: 0;
-    z-index: 1;
-  }
-}
-
-@include b(index-anchor) {
-  background-color: $-color-gray-3;
+  background-color: $-color-gray-2;
   padding: 10px;
   font-size: 14px;
   color: $-color-title;
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-anchor/wd-index-anchor.vue b/src/uni_modules/wot-design-uni/components/wd-index-anchor/wd-index-anchor.vue
index 64534390..402a0765 100644
--- a/src/uni_modules/wot-design-uni/components/wd-index-anchor/wd-index-anchor.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-index-anchor/wd-index-anchor.vue
@@ -1,12 +1,8 @@
 <template>
   <!-- #ifdef MP-DINGTALK -->
-  <view :class="`wd-index-anchor-ding ${indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === index ? 'is-sticky' : ''}`">
+  <view :class="`wd-index-anchor-ding ${isSticky ? 'is-sticky' : ''}`">
     <!-- #endif -->
-    <view
-      :class="`wd-index-anchor ${indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === index ? 'is-sticky' : ''} ${customClass}`"
-      :style="customStyle"
-      :id="indexAnchorId"
-    >
+    <view :class="`wd-index-anchor ${isSticky ? 'is-sticky' : ''} ${customClass}`" :style="customStyle" :id="indexAnchorId">
       <slot>
         {{ index }}
       </slot>
@@ -18,7 +14,7 @@
 
 <script setup lang="ts">
 import { indexAnchorProps } from './type'
-import { onMounted, getCurrentInstance, ref } from 'vue'
+import { onMounted, getCurrentInstance, ref, computed } from 'vue'
 import { indexBarInjectionKey } from '../wd-index-bar/type'
 import { getRect, isDef, uuid } from '../common/util'
 import { useParent } from '../composables/useParent'
@@ -31,6 +27,10 @@ const indexAnchorId = ref<string>(`indexBar${uuid()}`)
 
 const { proxy } = getCurrentInstance()!
 
+const isSticky = computed(() => {
+  return indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === props.index
+})
+
 function getInfo() {
   getRect(`#${indexAnchorId.value}`, false, proxy).then((res) => {
     if (isDef(indexBar)) {
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue b/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue
index c461302d..75de549e 100644
--- a/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue
@@ -100,7 +100,11 @@ function getAnchorByPageY(pageY: number) {
 
 function handleTouchMove(e: TouchEvent) {
   const clientY = e.touches[0].pageY
+  if (state.activeIndex === getAnchorByPageY(clientY).index) {
+    return
+  }
   state.activeIndex = getAnchorByPageY(clientY).index
+  scrollTop.value = getAnchorByPageY(clientY).top - offsetTop
 }
 
 function handleTouchEnd(e: TouchEvent) {