@58fe/p5
Version:
pc端vue组件
77 lines (66 loc) • 1.48 kB
Markdown
<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 | —— | —— |