weui.js实现下拉加载

WeUI.js 是腾讯推出的一套适用于微信小程序和网页的UI库，它提供了一系列组件来帮助开发者快速构建用户界面。下拉加载（也称为无限滚动或滚动加载）是移动端和网页中常见的交互模式，用于在用户滚动到页面底部时自动加载更多内容。

WeUI.js 实现下拉加载的基础概念

下拉加载通常涉及以下几个步骤：

监听滚动事件：检测用户是否滚动到了页面的底部。
触发加载：当用户接近页面底部时，触发加载更多数据的操作。
显示加载状态：在加载数据时，通常会显示一个加载指示器，如“加载中...”。
更新内容：加载完成后，将新数据添加到页面上，并隐藏加载指示器。

WeUI.js 实现下拉加载的优势

用户体验：用户无需手动点击“加载更多”按钮，可以在滚动过程中自动加载内容，提供更流畅的用户体验。
性能优化：通过按需加载内容，可以减少初始加载时间，提高页面性能。

WeUI.js 实现下拉加载的类型

无限滚动：用户滚动到页面底部时自动加载更多内容，直到没有更多内容为止。
分页加载：每次加载固定数量的内容，用户可以通过点击“加载更多”按钮或滚动到底部来加载下一页内容。

WeUI.js 实现下拉加载的应用场景

新闻列表：用户可以不断滚动查看最新的新闻内容。
商品列表：用户在浏览商品时，可以自动加载更多商品信息。
社交媒体：用户在浏览动态时，可以自动加载更多帖子。

WeUI.js 实现下拉加载的示例代码

以下是一个简单的示例，展示如何使用WeUI.js实现下拉加载：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeUI.js 下拉加载示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/weui@2.4.3/dist/style/weui.min.css">
</head>
<body>
    <div id="container" style="height: 100vh; overflow-y: scroll;" class="weui-scroll-view">
        <div id="content"></div>
        <div id="loading" class="weui-loading" style="display: none; text-align: center;">加载中...</div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/weui@2.4.3/dist/js/weui.min.js"></script>
    <script>
        let page = 1;
        const container = document.getElementById('container');
        const content = document.getElementById('content');
        const loading = document.getElementById('loading');

        function loadMore() {
            loading.style.display = 'block';
            // 模拟异步加载数据
            setTimeout(() => {
                for (let i = 0; i < 10; i++) {
                    const item = document.createElement('div');
                    item.className = 'weui-panel weui-panel_access';
                    item.innerHTML = `<div class="weui-panel__hd">Item ${page * 10 + i}</div>`;
                    content.appendChild(item);
                }
                page++;
                loading.style.display = 'none';
            }, 1000);
        }

        container.addEventListener('scroll', () => {
            if (container.scrollTop + container.clientHeight >= container.scrollHeight - 10) {
                loadMore();
            }
        });

        // 初始加载
        loadMore();
    </script>
</body>
</html>