上拉加载下拉刷新组件
参数 |
说明 |
类型 |
默认值 |
down |
下拉配置项 |
Object |
{} |
up |
上拉配置项 |
Object |
{} |
@down-pull |
下拉事件 |
Function |
--- |
@up-pull |
上拉事件 |
Function |
--- |
参数 |
说明 |
类型 |
默认值 |
offsetTop |
距离顶部距离滑动 |
number |
100 |
回调中的e对象说明:
参数 |
说明 |
类型 |
默认值 |
e.load |
当前次下拉动作完成 |
function |
--- |
e.reload |
重新刷新 |
function |
--- |
e.complete |
不再下拉或者刷新,over |
function |
--- |
<style>
* {
margin: 0;
padding: 0;
}
#app {
min-height: 100vh;
}
p {
font-size: 60px;
padding: 10px 0;
margin: 0 10px;
border-bottom: 1px solid #ddd;
}
</style>
<template>
<XScroll
:down="down"
:up="up"
@down-pull="downPull"
@up-pull = "upPull"
>
<div id="app">
<p v-for="(value, index) in list" :index="index">{{ index }}</p>
</div>
</XScroll>
</template>
<script>
import XScroll from './components/scroll.vue'
const list = [1,23,4,5,6,7,8,89,901,2,2,2]
export default {
data () {
return {
down: {
offsetTop: 100
},
up: {
offsetTop: 150
},
list,
}
},
methods: {
downPull (e) {
setTimeout(() => {
this.list = list
e.load()
}, 2000)
},
upPull (e) {
console.log(this.list)
setTimeout(() => {
this.list = [...this.list, ...list]
console.log(this.list.length)
if (this.list.length > 30) {
e.complete()
} else {
e.load()
}
}, 2000)
},
},
components: {
XScroll,
}
}
</script>