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

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

最重要的是加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)
  },
发布了115 篇原创文章 · 获赞 38 · 访问量 43万+

猜你喜欢

转载自blog.csdn.net/wangweiscsdn/article/details/96974853