zoukankan      html  css  js  c++  java
  • 使用在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}
    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%",
    }}
    />
    )
    }
     
    无吸顶功能
  • 相关阅读:
    比较两个DataTable数据(结构相同),返回新增的,删除的,修改前的,修改后的 DataTable
    通用jig类,用到委托
    网站性能优化之HTTP请求过程简述!
    常见JS效果实现实现之图片减速度滚动
    Firefox中实现的outerHTML
    电子商务网站上的常用的放大镜效果
    div背景半透明,覆盖整个可视区域的遮罩层效果
    Javascript类定义语法,私有成员、受保护成员、静态成员等
    HTML/CSS控制div垂直&&水平居中屏幕
    CSS团队协作开发方式的思考
  • 原文地址:https://www.cnblogs.com/cnlg123/p/11948878.html
Copyright © 2011-2022 走看看