使用在react hooks+antd ListView简单实现移动端长列表功能
Posted cnlg123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用在react hooks+antd ListView简单实现移动端长列表功能相关的知识，希望对你有一定的参考价值。
import React, { useState, useEffect } from "react"
import { ListView } from "antd-mobile"
const data = [
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
header: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png",
title: "Meet hotel",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png",
title: "McDonald‘s invites you",
des: "不是所有的兼职汪都需要风吹日晒",
},
{
img: "https://zos.alipayobjects.com/rmsportal/hfVtzEhPzTUewPm.png",
title: "Eat the week",
des: "不是所有的兼职汪都需要风吹日晒",
},
]
export default function Home() {
const [loading, setLoading] = useState(true)
const ds = new ListView.DataSource({
rowHasChanged: () => true,
})
const [dataSource, setDataSource] = useState(ds)
useEffect(() => {
setDataSource(dataSource.cloneWithRows([...data]))
}, [])
function onRequestMore() {
let newDate = [...data, ...data]
setDataSource(dataSource.cloneWithRows([...data, ...data]))
}
function renderItem(rowData, sectionID, rowID) {
return (
<div key={rowID} style={{ padding: "0 15px" }}>
<div
style={{
lineHeight: "50px",
color: "#888",
fontSize: 18,
borderBottom: "1px solid #F6F6F6",
}}
>
{rowData.title}
</div>
<div
style={{ display: "-webkit-box", display: "flex", padding: "15px 0" }}
>
<img
style={{ height: "64px", marginRight: "15px" }}
src={rowData.img}
/>
<div style={{ lineHeight: 1 }}>
<div style={{ marginBottom: "8px", fontWeight: "bold" }}>
{rowData.des}
</div>
<div>
<span style={{ fontSize: "30px", color: "#FF6E27" }}>35</span>¥{" "}
{rowID}
</div>
</div>
</div>
</div>
)
}
return (
<ListView
loading={false}
dataSource={dataSource}
renderRow={renderItem}
initialListSize={20}
pageSize={20}
onEndReached={event => {
onRequestMore()
}}
onEndReachedThreshold={10}
style={{
height: "100%",
}}
/>
)
}
无吸顶功能
以上是关于使用在react hooks+antd ListView简单实现移动端长列表功能的主要内容，如果未能解决你的问题，请参考以下文章
使用在react hooks+antd ListView简单实现移动端长列表功能
Antd使用timePicker封装时间范围选择器（React hook版）