标签：react 风吹日晒 img 汪都 hooks des 端长 zos title
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} alt="" /> <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,风吹日晒,img,汪都,hooks,des,端长,zos,title 来源： https://www.cnblogs.com/cnlg123/p/11948878.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。