<ListView
dataSource={dataSource.cloneWithRows(data)}
ref={node => handelRef(node)}
initialListSize={sessionStorage.getItem('dataLength') ? sessionStorage.getItem('dataLength') * 1 : 10}
renderFooter={() => (
<div
style={{ padding: 5, textAlign: 'center', fontSize: '14px' }}
>
{isHasMore &&
(isLoading ? (
<span className="list_loading">加载中...</span>
) : (
'已加载'
))}
{data.length != 0 && !isHasMore && '已经到底了'}
</div>
)}
onScroll={(e) => { this.handleScroll(e) }}
renderRow={row} //每行数据渲染
useBodyScroll={false}
style={{
minHeight: this.state.height, //高度需要定义
overflow: 'auto',
}}
pageSize={10} //一次渲染几条数据
onEndReached={this.onEndReached}
// onEndReachedThreshold={10}
/>
const handelRef = node => {
if (node && sessionStorage.getItem('fromDetail')) {//一个标识表示从详情页返回列表页
node.scrollTo(0, sessionStorage.getItem('scrollDistance') * 1)
}
}
//获取listview的当前滚动距离保存到缓存中
handleScroll = (e) => {
sessionStorage.setItem('scrollDistance', e.target.scrollTop)
}
// initialListSize必须要设置,保存列表到详情时的datalength
initialListSize={sessionStorage.getItem('dataLength') ? sessionStorage.getItem('dataLength') * 1 : 10}
antd-mobile的ListView进入详情页面再返回列表页面滚动到原来item位置
最新推荐文章于 2023-02-06 18:09:31 发布