/loadmore

js-滑动加载更多

Primary LanguageJavaScript

#js-loadmore 下滑加载更多组件

1.1 使用

1.1.1 commonJs规范

1 安装  npm install js-loadmore
2 引用  import Loadmore from 'js-loadmore'
3 使用  
        Loadmore.setOptions({
            pageCount,
            ajaxFN: (currentPage) => {}
        })
        Loadmore.toLoadFn()

1.1.2 引用 dist下js

1.2 参数

名称 类型 描述 必选 默认值
pageCount Number 总页数 Y ''
ajaxFN Function 加载时的调取接口,获取数据 Y ''
lock Booleans 滚动的开关,防止连续加载 N true
throttleTime Number 函数节流时间 N 30
toLoadHeight Number 离底部滚动点距离 N 150
page Number 当前页 N 1
page Number 当前页 N 1
toLoadNum Number 满足条件可加载数 N 20
lockTime Number 加载后多少秒打开开关让页面可继续加载- N 0
rectHeightDom Dom 要滚动区域,默认body N document.body
appendHTMLNode Dom 页面中加入 加载中,没有更多的dom N document.body
offsetHeight Dom 可见区域高度 N document.documentElement.offsetHeight || 0
loadText String 加载文案 N '加载中'
noMoreText String 没有更多文案 N '没有更多内容'

1.3 示例

    <!-- vue下 需要在 this.$nextTick下使用,其他可正常使用 -->
    
    this.$nextTick(function(){
        let loadParams = {
            pageCount,
            ajaxFN: (currentPage) => {
                <!-- 需要执行的回调 -->
                var params = {
                    currentPage
                }
                this.$store.dispatch('init', params)
                },
                lockTime: 30, 
        }
        Loadmore.setOptions(loadParams)
        Loadmore.toLoadFn()
    })
    
    ```