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)
  },

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章