基于 JQuery和Weui的上拉加载和下拉刷新

这篇文章距离上次修改已过290天，其中的内容可能已经有所变动。

使用JQuery和WeUI实现上拉载入和下拉刷新的功能，可以通过监听滚动事件和使用setTimeout模拟延时来实现。以下是一个简单的示例代码：

HTML部分：




<!DOCTYPE html>
<html>
<head>
    <title>上拉载入和下拉刷新</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="path/to/weui.css">
</head>
<body>
    <div class="weui-pull-to-refresh">
        <div class="weui-ptr-content">
            <p class="weui-ptr-text">下拉刷新</p>
        </div>
        <div class="weui-ptr-prompt">
            <p class="weui-ptr-prompt-text">刷新中...</p>
        </div>
        <div class="weui-ptr-loading">
            <div class="weui-loading"></div>
            <p class="weui-ptr-loading-text">正在刷新</p>
        </div>
        <!-- 内容区 -->
        <div class="weui-ptr-box">
            <div class="weui-ptr-box__content">
                <!-- 数据列表 -->
                <div class="weui-cells">
                    <!-- 数据内容 -->
                </div>
            </div>
        </div>
    </div>
 
    <script src="path/to/jquery.js"></script>
    <script>
        // 初始化下拉刷新
        var $ptrContent = $('.weui-ptr-content').eq(0);
        var $ptrText = $ptrContent.find('.weui-ptr-text');
        var $ptrPrompt = $('.weui-ptr-prompt').eq(0);
        var $loading = $('.weui-ptr-loading').eq(0);
        var isLoading = false;
 
        // 模拟下拉刷新
        $(document).on('touchstart', function(e) {
            if (!isLoading && $ptrPrompt.is(':hidden')) {
                var startPageY = e.originalEvent.touches[0].pageY;
                $(document).on('touchmove', function(e) {
                    if ($ptrPrompt.is(':hidden')) {
                        var movePageY = e.originalEvent.touches[0].pageY;
                        if (movePageY - startPageY > 5) {
                            $ptrContent.addClass('weui-ptr-ready');
                            $ptrPrompt.show();
                            e.preventDefault();
                        }
                    }
                });
                $(document).on('touchend', function() {
                    $(document).off('touchmove touchend');
                    if ($ptrContent.hasClass('weui-ptr-ready')) {
                        isLoading = true;
                        $ptrContent.addClass('weui-ptr-refreshing');
                        $loading.show();
                        setTimeout(function() {
                            // 执行刷新操作
                            console.log('执行刷新操作');

基于 JQuery和Weui的上拉加载和下拉刷新

评论已关闭

推荐阅读