使用iScroll实现上拉或者下拉刷新

Posted Ziv小威

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用iScroll实现上拉或者下拉刷新相关的知识,希望对你有一定的参考价值。

上拉或者下拉刷新的需求在移动端是非常常见的需求,大部分情况下,实现这个效果都使用网上现有的解决方案,例如有人使用swiper这个插件, 也有人使用iScroll这个滚动插件。本文的示例是利用iscroll实现的下拉刷新效果。

iScroll简介

iScrool是目前最成熟的自定义滚动解决方案之一,在移动端和PC有很好的兼容性。iScroll官方提供了5个不同的版本:

  • iscroll.js 通用版 包含了大部分公共特性
  • iscroll-lite.js 缩减版 削减了一些功能特性,例如:滚动条,鼠标滚轮等等
  • iscroll-probe.js 探索版 此版本可以满足你获取滚动条位置的需求。
  • iscroll-zoom.js 滚动缩放版
  • iscroll-infinite.js 无限制版

根据不同的需求,选择相应的版本,当前的示例中,我们选择的是iscroll-probe.js版。
Gitbook地址:iScroll API 中文版

详细使用

代码思路则是:利用监听滚动条的scroll事件,判断下拉或者上拉的距离,做上触发距离标记,当scrollEnd事件触发时,执行数据加载。让我们看核心部分代码:

html代码结构

<div id="MyScroller" class="main">
    <div class="warpper">
        <div id="PullDown" class="scroller-pullDown" style="display: none;">
            <img style="width: 20px; height: 20px;" src="rolling.svg" />
            <span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
        </div>
        <ul id="Content" class="dropdown-list">
        </ul>
        <div id="PullUp" class="scroller-pullUp" style="display: none;">
            <img style="width: 20px; height: 20px;" src="rolling.svg" />
            <span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>
        </div>
    </div>
</div>

CSS样式

.scroller {
    position: relative;
    width: 100%;
    height: 100%;
}

.scroller .warpper {
    position: absolute;
    width: 100%;
}

.scroller-pullDown, .scroller-pullUp {
    width: 100%;
    height: 30px;
    padding: 10px 0;
    text-align: center;
}

.dropdown-list {
    padding: 0;
    margin: 0;
}
    
.dropdown-list li {
    width: 100%;
    background: #ddd;
    line-height: 45px;
    text-align: center;
    color: #FFF;
    border-bottom: 1px solid #FFF;
}

javascript

var pullDown = document.querySelector("#PullDown"),
    pullUp = document.querySelector("#PullUp"),
    isPulled = false; // 拉动标记

var myScroll = new IScroll(‘#MyScroller‘, {
    probeType: 3,
    mouseWheel: true,
    scrollbars: true,
    preventDefault: false,
    fadeScrollbars: true
});

myScroll.on(‘scroll‘, function() {
    var height = this.y,
        bottomHeight = this.maxScrollY - height;

    // 控制下拉显示
    if (height >= 60) {
        pullDown.style.display = "block";
        isPulled = true;
        return;
    }
    else if (height < 60 && height >= 0) {
        pullDown.style.display = "none";
        return;
    }

    // 控制上拉显示
    if (bottomHeight >= 60) {
        pullUp.style.display = "block";
        isPulled = true;
        return;
    }
    else if (bottomHeight < 60 && bottomHeight >= 0) {
        pullUp.style.display = "none";
        return;
    }
})

myScroll.on(‘scrollEnd‘, function() { // 滚动结束
    if (isPulled) { // 如果达到触发条件,则执行加载
        isPulled = false;
        appendContent(getContents());
        myScroll.refresh();
    }
});

完整的demo请看:

http://wewoor.github.io/js-lab/iscroll-pulldown-load/index.html

原文地址:

http://imziv.com/blog/article/read.htm?id=73

以上是关于使用iScroll实现上拉或者下拉刷新的主要内容,如果未能解决你的问题,请参考以下文章

Iscroll4 实现下拉刷新,上拉加载,现在出现一个问题,就是当我在下拉刷新的同时,马上进行上拉

vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

基于iscroll实现下拉和上拉刷新

iscroll.js上拉下拉刷新时无法回弹问题怎么解决办法

iscroll4实现下拉刷新和下拉加载更多