实现一个简单的加载效果

安装

npm install loading-more --save

使用

• 引入

const LoadingMore = require('loading-more')

• 获取一个加载实例对象

let scroll = new LoadingMore(fatherEle,childEle, options)

• fatherEle 父元素，固定高度，overflow: hidden

• childEle 子元素，需要滚动的列表

• options 加载对象的样式设置/可选 width，height，color

    let container = document.getElementById('container')
    let box = document.getElementById('box')
    let scroll = new LoadingMore(container, box, {
        color: 'skyblue',
        height: '120px',
        width: '180px'
    })

• 设置鼠标滚动加载事件

scroll.loading(scrollType, callback1, callback2)

• scrollType 'down': 下拉加载 / 'up': 上拉加载 / ['down', 'up']: 数组形式, 回调函数个数与数组长度相同且顺序相同。
• callack 异步回调函数，建议使用 async await， 传入参数stop，异步事件完成后必须执行stop函数结束加载效果。

    scroll.loading('down', async function(stop){
        ...
        shop()
    })

Dome

查看加载效果