UNPKG

@58fe/p5

Version:

pc端vue组件

77 lines (66 loc) 1.48 kB
<script> module.exports = { methods:{ pullup(){ this.isloading = true; setTimeout(()=>{ this.list += 2; if(this.list >= 500){ console.log('stop!') this.isnomore = true; } this.isloading = false; },0) } }, data() { return{ list: 10, isloading: false, isnomore: false } } } </script> <style lang="scss" scoped> .list-box{ max-height: 250px; overflow-y: scroll; .list{ text-align: center; li{ height: 50px; line-height: 50px; /* background: #e8f3fe; */ background: #f7cdc4; margin: 10px 0; /* color: #7dbcfc; */ color: #fff; } } } </style> ## PullUp 下滑无限加载 ### 引入 ```javascript import { pullup } from '@58fe/p5'; ``` ### 基本用法 :::demo ```html <pullup v-on:pullup=pullup class="list-box" :isloading="isloading" :isnomore="isnomore" :distance="0"> <ul class="list" > <li v-for="item in list">{{item}}</li> </ul> </pullup> <script> </script> ``` ::: ### 参数 | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------ | ------- | ------- | ------- | | isloading | 加载数据中 | Boolean | —— | false | | isnomore | 数据全部加载完毕 | Boolean | —— | false | | distance | 距离底部的高度开始加载| String | —— | —— | | pullup | 事件 | Function | —— | —— |