`

上拉加载下拉刷新

 
阅读更多

调用示例:

html:

<div id="wrapper0">

<div>

...

</div>

</div>

js:

// 引入插件

import {Refresh} from '../libs/refresh';

// $('#wrapper0')[0] 为应用上下拉刷新的外层元素

window.myScroll = new Refresh($('#wrapper0')[0], {

    // 是否启用下拉刷新

    pullDownToRefresh: true,

    // 是否启用上拉加载

    pullUpToLoadMore: true,

    // 上拉刷新的回调

    refreshContent: function(){

         // 这里请求第一页的数据

    },

    // 下拉加载的回调

    loadMoreContent: function(){

        // 这里发ajax加载下一页数据

        // 没有下一页了,需要禁用下拉加载

        myScroll.disablePullUpToLoadMore()

    }

});

// 启用上拉刷新

myScroll.enablePullUpToLoadMore();

// 禁用上拉刷新

myScroll.disablePullUpToLoadMore();

// 启用下拉加载

myScroll.enablePullDownToRefresh();

// 禁用下拉加载

myScroll.disablePullDownToRefresh();

// 销毁上下拉加载

myScroll.destroy();

// 刷新scroll

myScroll.refresh();

 

代码:

import {iScroll} from './iscroll';

    function defer(fn){
        setTimeout(fn, 1);
    }
    function F() {}
    function Refresh(el, options) {
        options = Object.assign({}, Refresh.defaultOptions, options),
        iScroll.call(this, el, options),
        this._initializeDOMStructure(),
        this._status = {},
        this.options.topOffset = this._pullDownOffset(),
        this.refresh(),
        this.scrollTo(0, -this.options.topOffset, 0)
    }
    F.prototype = iScroll.prototype;
    var pullHeight = 30;
    var n = '<div class="pull"></div>'
      , r = '<span class="pullDown"></span>下拉刷新'
      , i = '<span class="pullUp"></span>松开立即刷新'
      , s = '<p class="tac"><span class="loading_01"></span>&nbsp;正在刷新...</p>'
      , o = '<div class="pull"></div>'
      , u = '<span class="pullUp"></span>上拉加载'
      , a = '<span class="pullDown"></span>松开立即加载'
      , f = '<p class="pull"><span class="loading_01"></span>&nbsp;正在加载...</p>';
    Refresh.prototype = Object.assign(new F, {
        constructor: Refresh,
        _setMinScrollY: function(y) {
            this.minScrollY = y,
            this.scrollerW = Math.round(this.scroller.offsetWidth * this.scale),
            this.scrollerH = Math.round((this.scroller.offsetHeight + this.minScrollY) * this.scale),
            this.maxScrollX = this.wrapperW - this.scrollerW,
            this.maxScrollY = this.wrapperH - this.scrollerH + this.minScrollY
        },
        _pullDownOffset: function(e) {
            return this.options.pullDownToRefresh ? this.pullDownEl ? this.pullDownEl.offset().height || pullHeight : 0 : 0
        },
        _initializeDOMStructure: function() {
        	$('head').append($('<style>.pull{text-align:center;line-height: 30px;font-size:24px;}</style>'));
            this.pullDownEl = $(n).prependTo(this.scroller),
            this._renderComponentByStatus("pulldown to refresh"),
            this.pullUpEl = $(o).appendTo(this.scroller),
            this._renderComponentByStatus("pullup to load more")
        },
        enablePullDownToRefresh: function() {
            this.options.pullDownToRefresh = true,
            this._status.toRefresh = this._status.refreshing = false,
            this._renderComponentByStatus("pulldown to refresh"),
            this.refresh()
        },
        disablePullDownToRefresh: function() {
            this.options.pullDownToRefresh = false,
            this.options.topOffset = this._pullDownOffset(),
            this.refresh()
        },
        enablePullUpToLoadMore: function() {
            this.options.pullUpToLoadMore = true,
            this._status.toLoad = this._status.loading = false,
            this._renderComponentByStatus("pullup to load more"),
            this.refresh()
        },
        disablePullUpToLoadMore: function() {
            this.options.pullUpToLoadMore = false,
            this.refresh()
        },
        disabledPullUpToLoadMore: function() {
            return console && console.log("*Deprecated*, rename to disablePullUpToLoadMore"),
            this.disablePullUpToLoadMore.apply(this, arguments)
        },
        refresh: function() {
            return this.pullDownEl && this.pullDownEl.toggle(this.options.pullDownToRefresh),
            this.pullUpEl && this.pullUpEl.toggle(this.options.pullUpToLoadMore),
            this.options.topOffset = this._pullDownOffset(),
            iScroll.prototype.refresh.apply(this, arguments)
        },
        destroy: function() {
            return this.pullDownEl.remove(),
            this.pullUpEl.remove(),
            iScroll.prototype.destroy.apply(this, arguments)
        },
        _renderComponentByStatus: function(e) {
            if (e === "pulldown to refresh")
                return this.pullDownEl && this.pullDownEl.html(r);
            if (e === "release to refresh")
                return this.pullDownEl && this.pullDownEl.html(i);
            if (e === "refreshing")
                return this.pullDownEl && this.pullDownEl.html(s);
            if (e === "pullup to load more")
                return this.pullUpEl && this.pullUpEl.html(u);
            if (e === "release to load more")
                return this.pullUpEl && this.pullUpEl.html(a);
            if (e === "loading")
                return this.pullUpEl && this.pullUpEl.html(f)
        }
    }),
    Refresh.defaultOptions = {
        hScrollbar: false,
        vScrollbar: true,
        refreshContent: function() {},
        loadMoreContent: function() {},
        pullDownToRefresh: true,
        pullUpToLoadMore: true,
        onScrollMove: function() {
            var status = this._status;
            this.options.pullDownToRefresh && (!status.toRefresh && this.y > pullHeight && (status.toRefresh = true,
            this._renderComponentByStatus("release to refresh")),
            status.toRefresh && this.y <= pullHeight && (status.toRefresh = false,
            this._renderComponentByStatus("pulldown to refresh"))),
            this.options.pullUpToLoadMore && (!status.toLoad && this.y < Math.min(this.maxScrollY, this.minScrollY) - pullHeight && (status.toLoad = true,
            this._renderComponentByStatus("release to load more")),
            status.toLoad && this.y >= Math.min(this.maxScrollY, this.minScrollY) - pullHeight && (status.toLoad = false,
            this._renderComponentByStatus("pullup to load more")))
        },
        onScrollEnd: function() {
            var self = this
              , status = this._status;
            status.toRefresh && this._renderComponentByStatus("pulldown to refresh"),
            status.toLoad && this._renderComponentByStatus("pullup to load more"),
            this.options.pullDownToRefresh && status.toRefresh && !status.refreshing && (status.refreshing = true,
            this.options.refreshContent.call(this, function() {
                defer(function() {
                    status.refreshing = status.toRefresh = false,
                    self.refresh()
                })
            })),
            this.options.pullUpToLoadMore && status.toLoad && !status.loading && (status.loading = true,
            this.options.loadMoreContent.call(this, function() {
                defer(function() {
                    status.loading = status.toLoad = false,
                    self.refresh()
                })
            }))
        }
    };
    
exports.Refresh = Refresh;


 

分享到:
评论

相关推荐

    Android自定义上拉加载下拉刷新控件

    在Android开发中,上拉加载和下拉刷新是常见的组件功能,用于提升用户体验,使得用户在滚动列表到顶部时能够方便地获取更多数据,而在滚动到底部时加载更多内容。本示例“Android自定义上拉加载下拉刷新控件”提供了...

    Vue vant 上拉加载 下拉刷新实际案例源码模板

    在这个"Vue vant 上拉加载 下拉刷新实际案例源码模板"中,我们将探讨如何使用 Vant 的上拉加载(LoadMore)和下拉刷新(PullRefresh)功能来增强用户体验。 1. **Vant LoadMore组件**: Vant 的 LoadMore 组件主要...

    pulltorefresh上拉加载下拉刷新

    标题中的“PullToRefresh”通常指的是Android和iOS应用开发中的一种常见交互设计,即“上拉加载/下拉刷新”功能。这个功能允许用户通过在屏幕底部向上滑动(上拉加载更多内容)或在顶部向下滑动(下拉刷新当前内容)...

    ListView上拉加载下拉刷新实现

    "ListView上拉加载下拉刷新实现"这个主题是关于如何使ListView具有上拉加载更多数据和下拉刷新当前显示内容的功能。这两种交互方式在现代移动应用中非常常见,提高了用户体验,让用户能够方便地获取或更新列表中的...

    listview的上拉加载下拉刷新+本地缓存+简单的头尾布局

    在本项目中,"listview的上拉加载下拉刷新+本地缓存+简单的头尾布局"是一个典型的移动应用功能实现,涉及到的技术点主要包括以下几个方面: 1. 上拉加载与下拉刷新:这是移动应用中常用的功能,提升用户体验,让...

    手机端 dropload实现上拉加载 下拉刷新

    "手机端 dropload 实现上拉加载 下拉刷新"这个话题关注的就是如何通过JavaScript技术来解决这个问题,为用户提供更好的浏览体验。Dropload 是一种常见的移动端网页组件,它允许用户在滚动到底部时自动加载更多内容...

    recyclerView 实现上拉加载下拉刷新

    本篇文章将深入探讨如何实现RecyclerView的上拉加载更多和下拉刷新功能,这在许多应用中都是必不可少的特性。 首先,我们需要理解RecyclerView的基本用法。RecyclerView提供了一个Adapter来绑定数据,并通过...

    移动端 下拉刷新 & 上拉加载 组件

    下拉刷新 上拉加载 ... 下拉刷新+上拉加载 下拉刷新+上拉加载 使用requirejs 下拉刷新+上拉加载 自定义dom 下拉刷新+上拉加载 固定头部 下拉刷新+上拉加载 tab一个实例 下拉刷新+上拉加载 tab多个实例

    安卓下拉上拉刷新相关-Listview上拉加载下拉刷新网络数据数据来自汇通网股票数据应该长期有效.rar

    在安卓应用开发中,"下拉刷新"与"上拉加载更多"是常见的用户交互功能,主要用于提升用户体验,使得用户可以方便地查看新的或者更多的数据。这个压缩包文件"安卓下拉上拉刷新相关-Listview上拉加载下拉刷新网络数据...

    recycleview上拉加载下拉刷新

    在本项目"PullLoadMoreRecyclerView"中,作者WuXiaolong实现了一个具有上拉加载更多和下拉刷新功能的RecyclerView,这是移动应用中常见的交互模式,特别是对于数据流无尽或者需要实时更新的内容。 1. **上拉加载更...

    上拉加载 下拉刷新框架 mescroll

    **上拉加载与下拉刷新框架 - mescroll** 在移动互联网时代,用户对网页的交互体验有着极高的要求,特别是在浏览数据量较大的列表时,上拉加载(Load More)和下拉刷新(Pull to Refresh)功能变得尤为重要。...

    上拉加载下拉刷新的RecycleView

    支持瀑布流,单列表,网格,使用见我博客

    简单上拉加载下拉刷新实现

    在安卓应用开发中,上拉加载(Load More)和下拉刷新(Pull to Refresh)是常见的功能,尤其在展示大量列表数据时。这两个特性能够提供更好的用户体验,让用户无需离开当前页面就能更新或加载更多内容。这里我们将...

    iscroll5+afui3.0上拉加载下拉刷新

    在移动应用开发中,上拉加载和下拉刷新是常见的用户体验设计模式,它们极大地提升了用户在滚动内容时的交互体验。本项目结合了iscroll5和AFUI3.0两个库,来实现这一功能。 iscroll5是一款轻量级、高性能的...

    dropload实现上拉加载下拉刷新

    在现代Web应用中,用户体验是至关重要的,而“上拉加载”和“下拉刷新”功能正是提升用户体验的重要手段。这两个特性广泛应用于各种列表或滚动视图中,比如社交媒体、电商应用或者新闻阅读器,使得用户可以无限制地...

    listview上拉加载下拉刷新demo

    `listview上拉加载下拉刷新demo`是一个示例项目,它演示了如何为ListView实现上拉加载更多和下拉刷新的功能,这对于处理长列表数据流的应用场景非常重要。这种功能可以提升用户体验,使用户能够轻松获取最新的或者更...

Global site tag (gtag.js) - Google Analytics