From 98ecf5597ea4f74f3b63f2bbced37ca417013b33 Mon Sep 17 00:00:00 2001
From: b2nil <kentsu.ho@gmail.com>
Date: Fri, 18 Sep 2020 10:46:40 +0800
Subject: [PATCH] =?UTF-8?q?fix(AtIndexes):=20=E4=BF=AE=E5=A4=8D=20#49=20on?=
 =?UTF-8?q?Click=20=E4=BB=A5=E5=8F=8A=20onScrollIntoView=20=E4=BA=8B?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=8D=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/navigation/indexes/index.vue    |  2 +-
 .../src/components/indexes/index.ts           | 59 ++++++++++++++++++-
 .../src/components/indexes/index.vue          | 26 ++++----
 packages/taro-ui-vue/src/utils/common.ts      |  2 +-
 4 files changed, 71 insertions(+), 18 deletions(-)

diff --git a/packages/taro-ui-vue-demo/src/pages/navigation/indexes/index.vue b/packages/taro-ui-vue-demo/src/pages/navigation/indexes/index.vue
index ea22839..5bb2a8c 100644
--- a/packages/taro-ui-vue-demo/src/pages/navigation/indexes/index.vue
+++ b/packages/taro-ui-vue-demo/src/pages/navigation/indexes/index.vue
@@ -48,7 +48,7 @@ export default {
 
     onClick(item) {
       Taro.showToast({
-        title: `onClick: ${item}`,
+        title: `onClick: ${JSON.stringify(item.name)}:  ${JSON.stringify(item.key)}`,
         icon: 'none',
       })
     },
diff --git a/packages/taro-ui-vue/src/components/indexes/index.ts b/packages/taro-ui-vue/src/components/indexes/index.ts
index c491010..a9c4298 100644
--- a/packages/taro-ui-vue/src/components/indexes/index.ts
+++ b/packages/taro-ui-vue/src/components/indexes/index.ts
@@ -62,6 +62,8 @@ export default {
       startTop: 0,
       // 右侧导航元素高度
       itemHeight: 0,
+      // scroll-view 列表项目的高度数组
+      scrollItemHeights: [],
       // 当前索引
       currentIndex: -1,
       listId: isTest() ? 'indexes-list-AOTU2018' : `list-${uuid()}`,
@@ -149,6 +151,7 @@ export default {
       }
 
       this.updateState({
+        _scrollTop: this.scrollItemHeights[idx],
         _scrollIntoView,
         _tipText,
       })
@@ -190,14 +193,20 @@ export default {
         Taro.vibrateShort()
       }
     },
-    getItemHeight () {
-      delayQuerySelector(this, '.at-indexes__menu').then((rect) => {
+    async getItemHeight () {
+      await delayQuerySelector(this, '.at-indexes__menu').then((rect) => {
         const arr = [...rect, { top: 0, height: 0 }]
         const len = this.list.length
         this.menuHeight = arr[0].height
         this.startTop = arr[0].top
         this.itemHeight = Math.floor(this.menuHeight / (len + 1))
       })
+
+      if (this.list.length > 0) {
+        await this._getScrollListItemHeights(this.list).then(res => {
+          this.scrollItemHeights = [...res]
+        })
+      }
     },
     initData() {
       if (this.isWeb) {
@@ -208,10 +217,54 @@ export default {
         }, 100)
       }
     },
+    _getHeight(selector: string, delay?: number) {
+      return new Promise<number>(resolve => {
+        delayQuerySelector(this, selector, delay).then(rect => {
+          // @ts-ignore
+          if(rect && rect[0]) {
+            // @ts-ignore
+            resolve(rect[0].height)
+          }
+        })
+      })
+    },
+    /**
+     *
+     * @param {Array<ListItem>} list
+     */
+    _getScrollListItemHeights(list) {
+      return new Promise<number[]>(resolve => {
+        if (list.length > 0) {
+          let rawHeights: Promise<number>[] = []
+          let itemHeights: number[] = []
+
+          // 获取 #at-indexes__top 的高度              
+          rawHeights.push(this._getHeight(`#at-indexes__top`))
+
+          // 获取 #at-indexes——list-${key} 的高度
+          list.forEach((item) => {
+            rawHeights.push(this._getHeight(`#at-indexes__list-${item.key}`))
+          })
+
+          Promise.all(rawHeights).then(res => {
+            let height = 0
+            itemHeights.push(height)
+
+            for (let i = 0; i < res.length; i++) {
+              height += res[i]
+              itemHeights.push(height)
+            }
+
+            resolve(itemHeights)
+          })
+        }
+      })
+    },
     handleScroll(e) {
       if (e && e.detail) {
         this.setState({
-          _scrollTop: e.detail.scrollTop,
+          // _scrollTop: e.detail.scrollTop,
+          _scrollIntoView: ''
         })
       }
     },
diff --git a/packages/taro-ui-vue/src/components/indexes/index.vue b/packages/taro-ui-vue/src/components/indexes/index.vue
index def3f89..2170887 100644
--- a/packages/taro-ui-vue/src/components/indexes/index.vue
+++ b/packages/taro-ui-vue/src/components/indexes/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <view :class="rootCls" :style="customStyle">
+  <view
+    :class="rootCls"
+    :style="customStyle"
+  >
     <AtToast
       :custom-style="toastStyle"
       :is-opened="state._isShowToast"
@@ -14,28 +17,27 @@
       <view
         class="at-indexes__menu-item"
         @tap="jumpTarget('at-indexes__top', 0)"
-      >
-        {{ topKey }}
-      </view>
+      >{{ topKey }}</view>
       <view
         v-for="(dataList, i) in list"
         :key="dataList.key"
         class="at-indexes__menu-item"
         @tap="jumpTarget(`at-indexes__list-${dataList.key}`, i + 1)"
-      >
-        {{ dataList.key }}
-      </view>
+      >{{ dataList.key }}</view>
     </view>
     <scroll-view
       :id="listId"
       class="at-indexes__body"
       :scroll-y="true"
       :scroll-with-animation="animation"
-      :scroll-top="isWEB ? state._scrollTop : undefined"
+      :scroll-top="state._scrollTop"
       :scroll-into-view="!isWEB ? state._scrollIntoView : ''"
       @scroll="handleScroll"
     >
-      <view id="at-indexes__top" class="at-indexes__content">
+      <view
+        id="at-indexes__top"
+        class="at-indexes__content"
+      >
         <slot />
       </view>
       <view
@@ -44,16 +46,14 @@
         :key="dataList.key"
         class="at-indexes__list"
       >
-        <view class="at-indexes__list-title">
-          {{ dataList.title }}
-        </view>
+        <view class="at-indexes__list-title">{{ dataList.title }}</view>
         <AtList>
           <template v-if="dataList.items">
             <AtListItem
               v-for="item in dataList.items"
               :key="item.name"
               :title="item.name"
-              @tap="handleClick"
+              :onClick="handleClick.bind(this, item)"
             />
           </template>
         </AtList>
diff --git a/packages/taro-ui-vue/src/utils/common.ts b/packages/taro-ui-vue/src/utils/common.ts
index e255645..bfc3e3e 100644
--- a/packages/taro-ui-vue/src/utils/common.ts
+++ b/packages/taro-ui-vue/src/utils/common.ts
@@ -20,7 +20,7 @@ const getEnvs = (): ENVS => {
 
 function delay(delayTime = 500): Promise<null> {
   return new Promise((resolve) => {
-    if ([Taro.ENV_TYPE.WEB, Taro.ENV_TYPE.SWAN].includes(ENV)) {
+    if ([Taro.ENV_TYPE.WEB, Taro.ENV_TYPE.SWAN, Taro.ENV_TYPE.WEAPP].includes(ENV)) {
       setTimeout(() => {
         resolve()
       }, delayTime)