This is a vue loadmore tool

🏠 Homepage

Example

Explain

避免数据一次性加载，分页加载，提升加载数据速度。

Install

yarn add lh-loadmore --save (推荐)

cnpm i lh-loadmore --save

npm i lh-loadmore --save

Usage

全局引用

main.js
  import LhLoadMore from 'lh-loadmore'
  Vue.use(LhLoadMore)

组件使用

1. 一般使用方法 Tips

<template>
  <div class="hello">
  
    <lh-loadmore
      :loadlist="newsList"
      :loadmoregif="loadMoreImg"
      :loadmoretxt="loadMoreTxt"
      :setscrollbtm="setScrollBtm"
      :listlength="listLength"
      :pagestar="pageStar"
      :pagelist="pageList"
      @nextpage="nextPage"
      @pagenone="pageNone"
    />
    
  </div>
</template>

<script>
  import Books from '../../static/newslist' // 模拟数据服务
  const Loadmoregif = require('../assets/loadmore.gif');
  const Loadmorenone = require('../assets/logo.png');

  export default {
    data () {
      return {
        newsList: [],
        loadMoreImg: Loadmoregif,
        loadMoreTxt: '加载中...',
        throttle: false,
        setScrollBtm: 50,
        listLength: 0,
        pageStar: 0,
        pageList: 6
      }
    },

    created () {
      // 数据初始化
      this.listLength = Books.length
      this.newsList = Books.slice(this.pageStar, this.pageStar + this.pageList)
      this.pageStar = this.pageStar + this.pageList
    },

    methods: {
      nextPage() { // 下一页数据
        this.newsList = [...this.newsList, ...Books.slice(this.pageStar, this.pageStar + this.pageList)]
        this.pageStar = this.pageStar + this.pageList
      },
      pageNone() { // 数据已加载完
        this.loadMoreImg = Loadmorenone
        this.loadMoreTxt = '暂无数据'
      }
    }
  }
</script>

2. 参数

参数 | 说明 | 类型 :- | :- | :- | loadlist | 数据展示列表 | Array loadmoregif | 加载动画的gif & 数据加载完的图标 | String loadmoretxt | 加载动画内容 | String setscrollbtm | 设置触底距离 | Number pagestar | 设置开始页码 | Number pagelist | 设置每页加载条数 | Number

3. 事件

事件名称 | 说明 | 设置数据 :- | :- | :- | created | 父组件生命周期初始化数据 | 数据总条数 & 初始化数据数组 & 变更后的页码开始值 nextpage | 加载下一页数据 | 向子组件传递新一页数据 & 传递页码开始值(子组件判断是否数据加载完) pageNone | 数据已加载完 | 向子组件传递加载结束图标 & 传递加载结束文字

注意

• css采用stylus进行开发，如果您没有安装对应依赖，我们在您安装我们插件的时候，自动帮您安装对应stylus依赖。
• 必须在created 函数中初始化您需要渲染的数据，这涉及到父子组件的生命周期执行顺序关系。
• 您的对应加载动画gif及结束动画图片，请在父组件使用require 动态引入。
• 关于插件布局，我们使用适合我们自己的布局渲染，如果不适合您，请修改node_modules相关代码包。

Author

👤 OUSANPANG

• Github: @LOUSANPANG

🤝 Contributing

Contributions, issues and feature requests are welcome!Feel free to check issues page.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 OUSANPANG. This project is ISC licensed.