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

喜欢ヅ旅行 2022-06-07 08:43 325阅读 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);
                    }
                });
            });

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用vue-pull-refresh插件实现下拉刷新

效果 ![Image 1][]![201812072340217.gif][] vue-pull-refresh插件 github地址： [https://gi

╰+攻爆jí腚メ/ 2023年10月18日 12:22/ 0 赞/ 56 阅读

相关基于uni-app的nvue上拉刷新下拉加载插件

yy-refresh 基于uni-app 的nvue上拉刷新和下拉加载插件，可以灵活控制刷新和加载的提示。插件地址:[https://ext.dcloud.net

谁借莪１个温暖的怀抱￠/ 2023年06月08日 03:16/ 0 赞/ 35 阅读

相关 flutter 下拉刷新插件flutter_easyrefresh

效果图如下 [插件地址][Link 1] ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_a

川长思鸟来/ 2023年02月19日 13:28/ 0 赞/ 21 阅读

相关前端上拉加载下拉刷新插件之mescroll.js

为什么要研究一款上拉加载下拉刷新的插件呢，因为最近新入职的新公司需要用，原来是用的mint-ui 的load-more ,存在兼容性问题，在浏览器模拟是完全没有问题的，但是在使

红太狼/ 2023年02月14日 01:52/ 0 赞/ 28 阅读

相关最牛x的滚动插件 – jquery的iscroll插件(附上下拉刷新消息demo)

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。它可以在桌面，移动设备和智能电视平台上工作。它一直在大力优化性能和文件大小以便在新旧设

喜欢ヅ旅行/ 2022年08月21日 07:38/ 0 赞/ 142 阅读

相关 PtrClassicFrameLayout 下拉刷新控件

android-Ultra-Pull-To-Refresh 源码解析本文为 [Android 开源项目源码解析][Android] 中 android-Ultra-Pu

心已赠人/ 2022年08月20日 02:15/ 0 赞/ 325 阅读

相关 Vuejs（16）——Vue插件写、用详解（附demo）

Vue插件 1、概述简单来说，插件就是指对Vue的功能的增强或补充。比如说，让你在每个单页面的组件里，都可以调用某个方法，或者共享使用某个变量，或者在某个方法

ゞ浴缸里的玫瑰/ 2022年07月10日 12:32/ 0 赞/ 266 阅读

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

var $vueReflash = {}; $vueReflash.hasMore = true; $vueReflash.page = 1;

喜欢ヅ旅行/ 2022年06月07日 08:43/ 0 赞/ 326 阅读

相关 Vuejs 插件开发

> by [yugasun][] from [yugasun.com/post/you-do…][yugasun.com_post_you-do]本文可全文转载，但需要保留原作

待我称王封你为后i/ 2022年05月23日 08:46/ 0 赞/ 332 阅读

相关 Android 下拉刷新控件

咱们今天就来实现一个下拉刷新控件。由于有时候不仅仅是ListView需要下拉刷新，ExpandableListView和GridView也有这个需求，由于ListView，Gr

谁借莪１个温暖的怀抱￠/ 2021年09月23日 04:44/ 0 赞/ 411 阅读