@itsdapi/taro36-virtual-list/lib/src/pages/virtual-list-demo/index.js

taro36-virtual-list

import React, { useState, useEffect, Fragment } from 'react';
import { View, Button } from '@tarojs/components';
import ZtVirtualList from '../../components/VirtualList';
import './index.scss';
export default function Demo() {
    const [list, setList] = useState([]);
    const [pageNum, setPageNum] = useState(1);
    useEffect(() => {
        const arr = [];
        Array(10).fill(0).forEach((item, index) => {
            arr.push({
                index,
                number: 0,
            });
        });
        setList(arr);
    }, []);
    // onReachBottom() {
    //   console.log('触底了----')
    //   // this.renderNext()
    //   this.setState({
    //     isBottom: true,
    //   })
    // }
    // getIsBottomStatus = (status) => {
    //   this.setState({
    //     isBottom: status,
    //   })
    // }
    const add = (index) => {
        const _list = [...list];
        _list[index]['index']++;
        setList(_list);
    };
    const renderFunc = (item, index, pageIndex) => {
        return (React.createElement(View, { className: "el", key: pageIndex + 10 },
            `当前是第${item.index}个元素，是第${pageIndex}屏的数据`,
            React.createElement(Button, { onClick: () => add(index) }, "+")));
    };
    // const handleBottom = () => {
    //   console.log('触底了')
    // }
    const handleComplete = () => {
        console.log('加载完成');
    };
    // const handleGetScrollData = (e) => {
    //   console.log('scroll-data', e)
    // }
    const handleScrollToLower = () => {
        const arr = [];
        Array(10).fill(0).forEach((item, index) => {
            arr.push({
                index: list.length + index,
                number: 0,
            });
        });
        let _list = [...list];
        _list = _list.concat(arr);
        setTimeout(() => {
            setList(_list);
        }, 1000);
        setPageNum(pageNum + 1);
    };
    const handleRenderLoad = () => {
        return '数据载入中...';
    };
    const handleRenderTop = () => {
        return (React.createElement(Fragment, null,
            React.createElement(View, null, "sjdlfjslf"),
            React.createElement(View, null, "sjdlfjslf"),
            React.createElement(View, null, "sjdlfjslf"),
            React.createElement(View, null, "sjdlfjslf"),
            React.createElement(View, null, "sjdlfjslf"),
            React.createElement(View, { className: "sticky-box" }, "\u6211\u662F\u5438\u9876\u5143\u7D20")));
    };
    return (React.createElement(View, null,
        React.createElement(ZtVirtualList, { list: list, pageNum: pageNum, segmentNum: 10, onRender: renderFunc, onRenderTop: handleRenderTop, 
            // onBottom={handleBottom}
            onComplete: handleComplete, 
            // onGetScrollData={handleGetScrollData}
            listType: "multi", onRenderLoad: handleRenderLoad, scrollViewProps: {
                style: {
                    "height": '100vh',
                },
                lowerThreshold: 30,
                onScrollToLower: handleScrollToLower,
            } })));
}
//# sourceMappingURL=index.js.map