原生js转动到底部加载数据和下拉革新 Scrollload

2024年1月5日 346次阅读 来源: fage

原文地点 https://github.com/fa-ge/Scrollload/blob/master/README.md

初志

如今挪动端站点越来越多，转动到底部加载数据和下拉革新的需求非常的罕见，纵然如今许多pc站点也会有如许的需求，比方百度首页就有。虽然简朴的完成这么一个功用非常轻易，然则转动往往会成为机能的瓶颈，处置惩罚不好转动很有可能会不流通。既然许多页面和项目都需要，固然最需要有一个复用性高的插件。然则我却一向没找到迥殊好用的插件，有些需要依靠jquery，但貌似编写如许的插件时jquery并没有带来任何的方便。

Scrollload.js引见

Scrollload是一个无依靠，体积极小（紧缩+gzip后不到3k），可设置性高(能够自定义加载时刻动画，加载完后的dom，提早加载的间隔)，可扩展性壮大（很轻易做到指定容器内的转动，多tab的转动,非常处置惩罚，革新从新加载等），机能好（在转动的时刻做了一些机能优化，如缓存window的高度，函数撙节）的js插件。源码地点: https://github.com/fa-ge/Scro…

处理的痛点

  1. 无依靠，设置简朴，有多套转动加载结果可选(需要零丁引入对应的css,固然也有默许结果)

  2. 支撑下拉革新

  3. 在ios中，全局转动会有许多不好的体验，我以为是能够用部分转动来替换全局的。部分转动也会有几个坑，但都是可处理的，也就是说全局转动的坑现在还很难处理。该插件内置部分转动坑的处理方案，轻易运用部分转动替换全局转动且无副作用。详细见ios部分转动的坑及处理方案。

兼容性

不支撑ie8及以下浏览器。

示例

无任何结果

有loading动画一(百度挪动端包含下拉革新)

有loading动画二

多个tab结果

div容器中的转动加载

摆布滑动tab而且转动加载——庞杂示例

非常处置惩罚

点击革新从新加载

示例源码

装置

npm install scrollload --save

运用

假如你没有用模块治理， 直接从window对象下取Scrollload对象也是能够的，打包后的js放在lib目录下，能够直接用script标签引入
同时支撑模块引入

//ES6
import Scrollload from 'Scrollload'
//commonjs
const Scrollload = require('Scrollload').default

固然也支撑amd,不过我没用过。
真正用起来也非常简朴。记着一点。插件会把底部DOM插进去到container末了一个子节点以后。

你的dom组织是以下如许的

<div class="scrollload-container">
    <ul class="scrollload-content">
        <li></li>
    </ul>
</div>

插件会把底部DOM就会被插在ul标签的背面。你能够根据你之前的体式格局操纵dom。demo中我都是用这类体式格局来做的。 我

下面是js中的运用。

let page = 1
new Scrollload({
      // container 和 content 两个设置的默许取的scrollload-container和scrollload-content类的dom。只需你根据以上的dom组织写，这两个设置是能够省略的
      container: document.querySelector('.scrollload-container'),
    content: document.querySelector('.scrollload-content'),
    loadMore: function(sl) {
        
        if (page === 6) {
          // 没有数据的时刻需要挪用noMoreData
            sl.noMoreData()
            return
        }

        // 我这里用jquery的不是因为需要jquery，只是jquery的语法看起来比较简朴。人人都熟悉。
        // 假如你不是用jquery，能够看看原生的insertAdjacentHTML要领来替换append
        $.ajax({
            type: 'GET',
            url: `http://rap.taobao.org/mockjsdata/14522/getgamelist?page=${page++}`,
            dataType: 'json',
            success: function(data){
                // contentDom实在就是你的scrollload-content类的dom
                $(sl.contentDom).append(data)

                // 处置惩罚完营业逻辑后必需要挪用unlock
                sl.unLock()
            },
            error: function(xhr, type){
                // 加载失足，需要实行该要领。如许底部DOM会涌现涌现非常的款式。
                sl.throwException()
            }
        })
    },
    // 你也能够封闭下拉革新
    enablePullRefresh: true,
    pullRefresh: function (sl) {
        $.ajax({
            type: 'GET',
            url: `http://rap.taobao.org/mockjsdata/14522/getgamelist?page=1`,
            dataType: 'json',
            success: function(data){
                $(sl.contentDom).prepend(data)

                // 处置惩罚完营业逻辑后必需要挪用refreshComplete
                sl.refreshComplete()
            }
        })
    }
})

参数列表

// 以下是设置参数及其默许内容     

// 容器
container: document.querySelector('.scrollload-container'),
// 列表内容
content: container.querySelector('.scrollload-content'),
// 视窗(默许是window，假如是部分转动需要设置转动的dom)
window: window,
  
// 是不是开启加载更多(默许开启，假如封闭则转动到底部则不再涌现加载更多)
enableLoadMore: true,
// 初始化的时刻是不是锁定，锁定的话则不会去加载更多。因为这个插件实例化后默许是没有锁定的所以会去挪用loadMore，但实在在多个tab的情况下是不应该一实例化完后就去挪用的。所以有了这个参数。
isInitLock: false,
// 阀值 (转动到底部提早加载的间隔)
threshold: 10,

// 修复部分转动的两个坑。拜见ios部分转动的坑及处理方案 https://zhuanlan.zhihu.com/p/24837233
useLocalScrollFix: false,
useScrollFix: false,

// 底部加载中的html
loadingHtml: generateHtml('加载中...'),
// 底部没有更多数据的html
noMoreDataHtml: generateHtml('没有更多数据了'),
// 底部涌现非常的html
exceptionHtml: generateHtml('涌现非常'),
// 加载更多的回调
loadMore: noop,

// 是不是开启下拉革新
enablePullRefresh: false,
// 顶部下拉革新的html
notEnoughRefreshPortHtml: generateHtml('下拉革新'),
// 顶部松开革新的html
overRefreshPortHtml: generateHtml('松开革新'),
// 顶部正在革新的html
refreshingHtml: generateHtml('正在革新'),
// 下拉革新的回调
pullRefresh: noop,
// 抵达革新点的回调(包含向上和向下，能够经由过程isMovingDown推断方向)
arrivedRefreshPortHandler: noop,
// 最先滑动的回调
touchStart: noop,
// 滑动时的回调
touchMove: noop,
// 滑动中松开手指的回调
touchEnd: noop,
// 凌驾可革新位置后的监听函数
overRefreshPortHandler: noop,
// 未凌驾可革新位置前的监听函数
notEnoughRefreshPortHandler: noop,

// 盘算下拉的阻力函数
calMovingDistance(start, end) {
    return (end - start) / 3
},
// 实例化完后的回调
initedHandler: noop

API

要领

  • lock(): 锁定后不会挪用loadMore要领

  • unLock(): 每次转动到底部都邑锁定，所以你在loadMoreFn要领中需要解锁，下次转动到底部才继承挪用loadMoreFn

  • noMoreData(): 当你的数据悉数加载完后挪用这个要领，将显现没有更多数据的div，你也能够设置这个div，用noMoreDataHtml设置参数

  • refreshData(): 当你挪用完noData要领后，假如你想革新当前的数据从新加载就要挪用这个要领

  • throwException(): 涌现非常需要挪用这个要领，会在底部DOM中涌现响应的款式

  • solveException(): 当你的非常问题处理后需要挪用这个要领能够继承加载数据

  • refreshComplete(): 下拉革新的时刻你去要求完数据后需要挪用这个函数关照我。我就能够把正在革新的状况改成革新完成。

  • getOptions(): 猎取设置

  • setOptions(obj): 修正设置。obj和new Scrollload()的第二个参数一样的花样。

  • setGlobalOptions(obj): 全局设置，一次设置屡次时刻。挪用这个要领和之前的要领不一样。之前的都需要对象实例化后才挪用。这个要领直接Scrollload组织函数上挪用。Scrollload.setGlobalOptions()。接收的参数和setOptions要领一样

属性

  • bottomDom: 底部DOM，包裹着加载中动画和没有更多数据的dom对象

  • isLock: 是不是为锁定状况

  • hasMoreData: 是不是另有更多数据，默许为true，挪用noData要领后为false

  • container: 你传进来的container

  • content: 你传进来的content

  • win: 你传进来的window

  • isMovingDown: 下拉革新的时刻你滑动的方向

  • isRefreshing: 下拉革新的时刻你是不是在革新中

  • distance: 下拉革新的时刻你滑动的dom挪动的间隔，不是你手指挪动的间隔。这两者的关联能够经由过程calMovingDistance盘算

交换

假如你有好的加载更多动画的结果，能够在loading-demos文件夹下写一些本身的demo，loading的css必需是loading.css，并在头部到场loadingHtml的dom组织。参考,然后提一个pr给我。

固然用的时刻有什么发起都能够和我提，有什么不晓得也能够和我提。任何情势和我提都能够。

    原文作者：fage
    原文地址: https://segmentfault.com/a/1190000008039156
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞