fix(Indexes): 修复 H5 下索引位置错落的问题

jd-opensource · Dec 13, 2018 · d7d2b5c · d7d2b5c
1 parent 04909f0
commit d7d2b5c
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/src/components/indexes/index.js b/src/components/indexes/index.js
@@ -42,14 +42,15 @@ export default class AtIndexes extends AtComponent {
     super(...arguments)
     this.state = {
       targetView: '',
-      targetOffsetTop: 0
+      scrollTop: 0
     }
     // 右侧导航高度
     this.menuHeight = 0
     // 右侧导航距离顶部高度
     this.startTop = 0
     this.itemHeight = 0
     this.currentIndex = -1
+    this._scrollTop = 0
   }
 
   handleClick () {
@@ -91,10 +92,11 @@ export default class AtIndexes extends AtComponent {
     } else if (env === Taro.ENV_TYPE.WEB) {
       // web环境
       const bodyOffsetTop = this.indexesRef.vnode.dom.getBoundingClientRect().top
-      // 目标节点offsetTop
       const targetOffsetTop = this.listRef.vnode.dom.childNodes[i].getBoundingClientRect().top
+      const targetScrollTop = this._scrollTop + targetOffsetTop - bodyOffsetTop
+
       this.setState({
-        targetOffsetTop: targetOffsetTop - bodyOffsetTop
+        scrollTop: targetScrollTop
       })
     }
     if (this.props.isShowToast) {
@@ -142,6 +144,11 @@ export default class AtIndexes extends AtComponent {
 
   getMenuRef = node => (this.menuRef = node)
 
+  handleScroll (ev) {
+    const { scrollTop } = ev.detail
+    this._scrollTop = scrollTop
+  }
+
   render () {
     const {
       className,
@@ -187,8 +194,9 @@ export default class AtIndexes extends AtComponent {
           className='at-indexes__body'
           scrollY
           scrollWithAnimation={animation}
-          scrollTop={this.state.targetOffsetTop}
+          scrollTop={this.state.scrollTop}
           scrollIntoView={this.state.targetView}
+          onScroll={this.handleScroll.bind(this)}
           ref={this.getListRef}
         >
           <View