mui-上拉加载和下拉刷新

最新推荐文章于 2024-05-13 12:20:21 发布

任平生01

最新推荐文章于 2024-05-13 12:20:21 发布

阅读量1k

点赞数

分类专栏： mui 文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_47808670/article/details/123548936

版权

mui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mui上拉加载和下拉刷新</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/mui/3.7.1/css/mui.min.css">
    <script src="https://cdn.staticfile.org/mui/3.7.1/js/mui.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/Mock.js/1.0.1-beta3/mock.js"></script>
    <style>
        /* 解决web调试报错 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL> */
        * {
            touch-action: pan-y;
        }
    </style>
</head>

<body>
    <div id="box"
        style="padding-bottom: 50px;position: absolute;top: 0;bottom: 0px;left: 0;width: 100%;border: 1px solid;">
        <ul id="content">
        </ul>
    </div>
    <script>
        let count = 0
        let data = []
        Mock.mock('/user/userInfo', '@range(1, 13)')
        function getData(type) {
            if (type == 'down') {
                count = 0
                data = []
            }
            console.log('count', count);

            $.ajax({
                url: '/user/userInfo',
                // dataType: 'json',
                success: (res) => {
                    res = JSON.parse(res)
                    data = [...data, ...res]
                    console.log('当前数据', data);
                    for (let i = 0; i < res.length; i++) {
                        let li = document.createElement('li')
                        li.innerText = res[i]
                        li.style.cssText = "height:50px;border:1px solid yellow;";
                        console.log(li);
                        document.querySelector('#content').appendChild(li)
                    }
                    if (type == 'down') {
                        // 结束下拉
                        mui('#box').pullRefresh().endPulldownToRefresh();
                    } else {
                        // 结束上拉加载
                        count++
                    }
                    mui('#box').pullRefresh().endPullupToRefresh();
                    if (count > 3) {
                        this.endPullupToRefresh(true);
                        // 显示没有更多了提示文字
                        let li = document.createElement('li')
                        li.innerText = '没有更多数据了'
                        document.querySelector('#content').appendChild(li)
                    }
                }

            })

        }
        function a() {
            console.log(123);
            // mui('#content').pullRefresh().endPulldown();
        }
        //上拉加载
        mui('#box').pullRefresh({
            container: '#box',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
            up: {
                height: 50,//可选.默认50.触发上拉加载拖动距离
                auto: false,//可选,默认false.自动上拉加载一次
                contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；默认显示位置在顶部
                callback: getData //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
            },
            down: {
                height: 10, //可选,默认50.触发下拉刷新拖动距离,
                auto: true, //可选,默认false.首次加载自动下拉刷新一次
                contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                callback: function () {
                    document.querySelector('#content').innerHTML = ''
                    getData('down')
                }
            }
        });
    </script>
</body>

</html>

任平生01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
mui-上拉加载和下拉刷新

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mu
复制链接

扫一扫