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 hooks+antd ListView简单实现移动端长列表功能的更多相关文章

  1. React Native - 4 ListView 简单使用

    1. 首先要import ListView组件 2. 使用如下代码,注意ListView里的dataSource大小写,我当时把S给小写了,结果花了半个多小时找原因…… 3. 运行结果

  2. react新特性 react hooks

    本文介绍的是react新特性react hooks,本文面向的是有一定react开发经验的小伙伴,如果你对react还不是很熟悉的话我建议你先学习react并多多联系. 首先我们都知道react有3种 ...

  3. React Hooks简单业务场景实战(非源码解读)

    前言 React Hooks 是React 16.7.0-alpha 版本推出的新特性.从 16.8.0 开始,React更稳定的支持了这一新特性. 它可以让你在不编写 class 的情况下使用 st ...

  4. 基于react hooks,zarm组件库配置开发h5表单页面

    最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...

  5. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

  6. React Native之ListView使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  7. React Native之ListView实现九宫格效果

    概述 在安卓原生开发中,ListView是很常用的一个列表控件,那么React Native(RN)如何实现该功能呢?我们来看一下ListView的源码 ListView是基于ScrollView扩展 ...

  8. 通过 React Hooks 声明式地使用 setInterval

    本文由云+社区发表 作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: setInterval 用起来没你想的简单. Ryan Florence 在他 ...

  9. 关于React Hooks,你不得不知的事

    React Hooks是React 16.8发布以来最吸引人的特性之一.在开始介绍React Hooks之前,让咱们先来理解一下什么是hooks.wikipedia是这样给hook下定义的: In c ...

随机推荐

  1. c#winform自定义窗体,重绘标题栏,自定义控件学习

    c#winform自定义窗体,重绘标题栏 虽然现在都在说winform窗体太丑了,但是我也能尽量让桌面应用程序漂亮那么一点点话不多说,先上图 重绘标题栏先将原生窗体设置成无边框,FormBoderSt ...

  2. Q&A in 2018 - Q2

    How to zip a file for Windows? 压缩一个文件: makecab c:/file_name.txt c:/file_name.zip 解压一个文件: expand c:/f ...

  3. Asp.net core 3.1+EF Core2.2.6+Oracle.EntityFrameworkCore2.1.19连接Oracle数据库

    Asp.net Core 3.1+EF Core2.2.6+Oracle.EntityFrameworkCore2.1.19连接Oracle数据库 1.前言 本次主要采用Asp.net core3.1 ...

  4. 删除Win10菜单中的幽灵菜单(ms-resource:AppName/Text )

    新建一个 .bat文件,输入以下内容 @echo off taskkill /f /im explorer.exe taskkill /f /im shellexperiencehost.exe ti ...

  5. CF #618 div.2

    序 闲来无事,打场CF,本人蒟蒻,考场A了前三道,第四有解答 正文 T1 Non-zero 是道水题.... 给你一个序列a.要求你输出最少的操作次数使这个序列的累和与累乘都不为0: 一次操作指给\( ...

  6. [TJOI2007] 足彩投注

    足彩投注 题目概述 题目背景 了解足球彩票的人可能知道,足球彩票中有一种游戏叫做"胜负彩",意为猜比赛的胜负.下面是一些与胜负彩有关的术语 注 :每一组有效组合数据. 投 注:彩民 ...

  7. job无法自动运行基于ABP后台服务 - 后台作业和后台工人

    原因: 后台作业和后台工人仅在你的应用程序运行的时候才工作.如果web应用长时间没有被请求执行,Asp.Net应用默认是关闭的 解决方案: 应用程序池(Application Pool),Proces ...

  8. 关于GET和POST请求的区别,最通俗全面的回答

    GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含在URL中,POST通过request body传递参数. 你可能自己 ...

  9. 关于xshell和文件传输相关

    Xshell连接linux系统 下载Xshell后启动软件 不能连接,没有弹出输入账户和密码时在linux中执行 然后再次执行Xshell 连接成功 文件传输 点击Xshell的文件传输 会引导你去安 ...

  10. maven依赖包无法更新下载

    在IDEA工程中导入已存在的module时,按默认设置,直到完成导入,结果所有的外部依赖包都无法更新下载,即使是更新了setting.xml配置文件信息,依旧是不能更新下载依赖包,现将具体的操作过程和 ...