# vue-slide-up-to-more

> ---

Latest version **0.2.0** (published 2022-10-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-slide-up-to-more
pnpm add vue-slide-up-to-more
yarn add vue-slide-up-to-more
bun add vue-slide-up-to-more
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2022-10-25 |
| First published | 2022-10-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 576.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | pirloliu |
| Keywords | Moible UI, Bounce UI, 没有更多了, vant 3, Vue3 |

## Links

- npm: https://www.npmjs.com/package/vue-slide-up-to-more
- Repository: https://github.com/wentianl20/vue-slide-up-to-more
- Homepage: https://github.com/wentianl20/vue-slide-up-to-more#readme
- Issues: https://github.com/wentianl20/vue-slide-up-to-more/issues
- npm.io page: https://npm.io/package/vue-slide-up-to-more

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.2.13
- [vant](https://npm.io/package/vant.md) ^3.6.4
- [core-js](https://npm.io/package/core-js.md) ^3.8.3

## Recent versions

- 0.2.0 (latest) — 2022-10-25
- 0.1.0 — 2022-10-25

## README

# vue-slide-up-to-more
### [中文说明](https://github.com/wentianl20/vue-slide-up-to-more/blob/master/README.zh-CN.md)

---

#### A H5 slide up for more items UI with bounce style based on Vant List, as shown below, 
![avatar](https://raw.githubusercontent.com/wiki/wentianl20/vue-slide-up-to-more/222_AdobeExpress.gif)

## Install

---

#### Using `npm` to install:

```
npm i vue-slide-up-to-more
```

### Quickstart

---

main.js
```js
import { createApp } from 'vue'
import App from './App.vue'
import PageList from 'vue-slide-up-to-more'
import 'vue-slide-up-to-more/lib/vue-slide-up-to-more.css'

const app = createApp(App)
app.use(PageList).mount('#app')
```


App.vue
```vue
<template>
  PageList Component

  <page-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="Not any more"
      loading-text="Loading..."
      @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </page-list>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  loading.value = true
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    loading.value = false;

    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

```


### Properties/Events/Methods

---
#### finished-text
Promp shows when no more items to display. Default value is "没有更多了"
#### others
Please refer the [Vant UI](https://vant-ui.github.io/vant/#/en-US/list) for more details


### Browser Support

---

#### same as Vue 3 support list

### License

---

### [MIT](https://en.wikipedia.org/wiki/MIT_License)

---
_Source: https://npm.io/package/vue-slide-up-to-more · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._