ant mobile 的 ListView 组件加载一定数据后，回到之前的滚动条的滚动位置

灰太狼 2021-11-26 14:48 327阅读 0赞

这种长列表加载很多页之后，然后跳转至某个详情页面再返回到列表页要到原来的位置

最重要的是加ref， ref=\{ node => handelRef(node) \}， 还有就是要动态的设置initialListSize的值，首屏渲染的条数，不然默认只渲染20条，等你数据加载超过20条就不能滚动到指定位置哦~

<ListView
                  ref={ node => handelRef(node) }
                  initialListSize={ isFromRestDetail ? dataList.length : 10 }
                  dataSource={ dataSource }
                  renderHeader={ () => <TopCrawfishComponent datas={ props } showAddressP={ showAddress } /> }
                  renderFooter={ () => (<div className='crawfish-footer-listview' >
                    { (rData.length >= limit || loadingStatus) ? statusText[loadingStatus] : '' }
                  </div>) }
                  renderRow={ res => { return <ResturantItem data={ res } handleScrollTop={ handleScrollTop } rData={ rData } pageIndex={ pageIndex } /> } }
                  className='resturant-item-container'
                  pageSize={ 10 }
                  useBodyScroll={ false }
                  onScroll={ forceCheck }
                  scrollRenderAheadDistance={ 500 }
                  scrollEventThrottle={ 200 }
                  onEndReached={ () => isCanGet && handleListView(10, pageIndex, fetchData, dataSource, isLoading, rData, currentTab) }
                  onEndReachedThreshold={ 1000 }
                />

然后这个scrollTo方法是ListView组件提供的

handelRef: node => {
        // console.log('node', node)
        // listview的滚动到指定位置
        const oldScrollTop = getStore('oldScrollTop', 'session')
        const isFromRestDetail = Number(getStore('isFromRestDetail', 'session'))
    // 这个scrollTo方法是ListView组件提供的方法，滚动到指定位置
        if (isFromRestDetail && node) node.scrollTo(0, oldScrollTop)
      },