vue.js 下拉刷新插件(demo)

最新推荐文章于 2024-06-28 07:30:00 发布

渐行渐远-

最新推荐文章于 2024-06-28 07:30:00 发布

阅读量1.6k

点赞数 1

分类专栏： js-踩坑日志文章标签：插件 js vue 下拉刷新

本文链接：https://blog.csdn.net/qq_35704236/article/details/78253665

版权

js-踩坑日志专栏收录该内容

2 篇文章 0 订阅

订阅专栏

var $vueReflash = {};

$vueReflash.hasMore = true;
$vueReflash.page = 1;
$vueReflash.beans;// 用户合并的数组
$vueReflash.vue;// vue 对象
$vueReflash.func;// 用于下拉刷新的方法

$vueReflash.load = function() {
    $(window).scroll(function() {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
            if ($vueReflash.hasMore) {
                $vueReflash.page = $vueReflash.page + 1;
                $vueReflash.func();
            }
        }
    });
}

$vueReflash.start = function (func) {
    $vueReflash.func = func;
    $vueReflash.func();
}

$vueReflash.setPageInfo = function (hasMore, page) {
    $vueReflash.hasMore = hasMore;
    $vueReflash.page = page;
}

$vueReflash.updateBindDate = function (dataName, date) {
    $vueReflash.beans = $vueReflash.beans.concat(date);
    $vueReflash.vue._data[dataName] = $vueReflash.beans;
}

调用
$vueReflash.load();
        $vueReflash.start(function () {
            $.get("/cgi-data/user/video/list.html?userId=${id}&page="+ $vueReflash.page, {}, function(data){
                var dataBody = data.body;
                $vueReflash.setPageInfo(dataBody.hasMore, dataBody.page);

                var videos = dataBody.list;

                for(var i = 0; i < videos.length; i++){
                    var video = videos[i];
                    video["createTime"] = XYL.getDateByString(video.createTime);
                    video["duration"] = XYL.formatVideoTime(video.duration);
                }

                if ($vueReflash.page == 1) {
                    $vueReflash.beans = videos;
                    $vueReflash.vue = new Vue({
                        el : '#videos',
                        data : {
                            videos : videos,
                        }
                    });
                } else if ($vueReflash.page > 1) {
                    // 合并两个 videos， 并且更新绑定的数据
                    $vueReflash.updateBindDate('videos', videos);
                }
            });
        });