loading-more

一个加载组件

Usage no npm install needed!

<script type="module">
  import loadingMore from 'https://cdn.skypack.dev/loading-more';
</script>

README

实现一个简单的加载效果

安装

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

查看加载效果