# jx-vue2-load-more

> A Vue.js project,vue-load-more,vuejs,vue

Latest version **1.0.2** (published 2023-09-14) · 0 weekly downloads

## Install

```sh
npm install jx-vue2-load-more
pnpm add jx-vue2-load-more
yarn add jx-vue2-load-more
bun add jx-vue2-load-more
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-09-14 |
| First published | 2022-11-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 1 |
| Unpacked size | 15.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | bingo1992 |
| Maintainers | bingo1992 |
| Keywords | load-more, vue2 |

## Links

- npm: https://www.npmjs.com/package/jx-vue2-load-more
- npm.io page: https://npm.io/package/jx-vue2-load-more

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.2

## Recent versions

- 1.0.2 (latest) — 2023-09-14
- 1.0.1 — 2022-12-01
- 1.0.0 — 2022-11-30

## README

## 介绍 
基于vue2.0的上拉加载更多  组件

## 组件使用

>安装
```bash
npm install --save jx-vue2-load-more
```
 
>使用 
```html
<template>
  <div id="app">
    <div v-for="(item, i) in list" :key="i"> 
      <p class="item">{{item.name}}</p> 
    </div>
    <load-more
    :status="loadingType"
    @loadMoreData="loadMoreData"
    ></load-more> 
    </div>
  </div>
</template>
<script>
 import loadMore from 'jx-vue2-load-more'; 
 export default {
  name: 'App', 
  data() {
    return { 
      list: [],
      loadingType: 'more',
      pageNo: 1, // 当前页数
      isLastPage: 5 //总页数
    }
  },
  components: {
    loadMore
  },
  mounted() {
    this.loadData() 
  },
  methods: {
    loadData() {
      this.loadingType = 'loading'
       setTimeout(() => {
          this.list = this.list.concat([{ 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }, { 
            name: '第'+this.pageNo +'条'
          }])  
          this.loadingType =  (this.pageNo < this.isLastPage) ? 'more' : 'noMore'
       }, 1000)  
    },
		loadMoreData() {
      if(this.loadingType === 'loading' || this.loadingType === 'noMore') {
					//防止重复加载
					return;
      }   
      this.pageNo ++
      this.loadData() 
		}  
  } 
 }
</script>
<style> 
.item {
  line-height: 200px;
}
</style>
 ```
 >属性配置说明
 ```
loadingType 当前状态（more代表可加载更多，noMore代表已是最后一页，loading代表加载中。默认值为more）；  
@loadMoreData 加载下一页内容。

---
_Source: https://npm.io/package/jx-vue2-load-more · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._