refactor: ♻️ 索引栏支持侧边栏滑动时同步滚动列表

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 索引栏"
           }]
         }, {

docs/component/index-bar.md

@@ -13,10 +13,10 @@
 ```vue
 <template>
   <view class="wraper">
-    <wd-index-bar>
+    <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">{{ 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>
 ```
 

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>

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;
+  background-color: $-color-gray-2;
-  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;
   padding: 10px;
   font-size: 14px;
   color: $-color-title;

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
+    <view :class="`wd-index-anchor ${isSticky ? 'is-sticky' : ''} ${customClass}`" :style="customStyle" :id="indexAnchorId">
-      :class="`wd-index-anchor ${indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === index ? '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)) {

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) {