lh-loadmore v0.1.0

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. 参数

3. 事件

注意

• 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.