virtual list scrollTo 后的滚动会额外触发一次 render，并导致 scrollView 回到顶部

[GitaiQAQ]

相关平台

微信小程序

复现仓库

https://gist.github.com/GitaiQAQ/e5b768898325031dcd079eea22c4916a
小程序基础库: 2.14.4
使用框架: React

复现步骤

• 点击 test，scrollTo 100， scrollTop 变成 100
• 向下或者向上滚动
• 会触发 render 导致 scrollTop 变成 0

期望结果

scrollTop 变成 100

实际结果

scrollTop 变成 0

环境信息

👽 Taro v3.0.18


  Taro CLI 3.0.18 environment info:
    System:
      OS: macOS 10.15.7
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 14.5.0 - ~/.nvm/versions/node/v14.5.0/bin/node
      Yarn: 1.22.4 - /usr/local/bin/yarn
      npm: 6.14.5 - ~/.nvm/versions/node/v14.5.0/bin/npm

[GitaiQAQ]

可以通过在 createListComponent 增加 lockedScrollOffset 来提供一个稳定的 scrollOffset，来解决这个问题

this._onScrollVertical = event => {
  const {
    clientHeight,
    scrollHeight,
    scrollTop
  } = event.currentTarget
  this.setState(prevState => {
    if (prevState.scrollOffset === scrollTop) {
      // Scroll position may have been updated by cDM/cDU,
      // In which case we don't need to trigger another render,
      // And we don't want to update state.isScrolling.
      return null
    } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.

    const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight))
    return {
      isScrolling: true,
      scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
      scrollOffset,
+     lockedScrollOffset: (prevState.lockedScrollOffset === scrollOffset ? scrollOffset + 0.1 : scrollOffset),
      scrollUpdateWasRequested: false
    }
  }, this._resetIsScrollingDebounced)
}

render () {
      ...
   if (scrollUpdateWasRequested) {
        if (isHorizontal) {
            outerElementProps.scrollLeft = scrollOffset
        } else {
            outerElementProps.scrollTop = scrollOffset
        }
+    } else {
+       if (isHorizontal) {
+           outerElementProps.scrollLeft = lockedScrollOffset
+       } else {
+           outerElementProps.scrollTop = lockedScrollOffset
+       }
+.   }
      ...
}

[ZakaryCode]

未能复现到该问题😂

[ZakaryCode]

知道你说的是啥了，确实是会有一点影响体验，PR 将被合入

[MarshallYang]

可以通过在 createListComponent 增加 lockedScrollOffset 来提供一个稳定的 scrollOffset，来解决这个问题

this._onScrollVertical = event => {
  const {
    clientHeight,
    scrollHeight,
    scrollTop
  } = event.currentTarget
  this.setState(prevState => {
    if (prevState.scrollOffset === scrollTop) {
      // Scroll position may have been updated by cDM/cDU,
      // In which case we don't need to trigger another render,
      // And we don't want to update state.isScrolling.
      return null
    } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.

    const scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight))
    return {
      isScrolling: true,
      scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
      scrollOffset,
+     lockedScrollOffset: (prevState.lockedScrollOffset === scrollOffset ? scrollOffset + 0.1 : scrollOffset),
      scrollUpdateWasRequested: false
    }
  }, this._resetIsScrollingDebounced)
}

render () {
      ...
   if (scrollUpdateWasRequested) {
        if (isHorizontal) {
            outerElementProps.scrollLeft = scrollOffset
        } else {
            outerElementProps.scrollTop = scrollOffset
        }
+    } else {
+       if (isHorizontal) {
+           outerElementProps.scrollLeft = lockedScrollOffset
+       } else {
+           outerElementProps.scrollTop = lockedScrollOffset
+       }
+.   }
      ...
}

3.0.28 版本后 VirtualList 滚动的时候支付宝小程序平台下会有抖动的现象发生。

[ihwf]

微信小程序内也出现抖动问题

[17]

最新 3.2.10 仍然有这个问题