vue-slide-up-to-more

中文说明

A H5 slide up for more items UI with bounce style based on Vant List, as shown below,

Install

Using npm to install:

npm i vue-slide-up-to-more

Quickstart

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

<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 for more details

Browser Support

same as Vue 3 support list

License

MIT