Xsk-scroll NPM

x-scroll

上拉加载下拉刷新组件

使用方式

下拉

参数	说明	类型	默认值
down	下拉配置项	Object	{}
up	上拉配置项	Object	{}
@down-pull	下拉事件	Function	---
@up-pull	上拉事件	Function	---

down / up

参数	说明	类型	默认值
offsetTop	距离顶部距离滑动	number	100

@up-pull/@down-pull

回调中的e对象说明：

参数	说明	类型	默认值
e.load	当前次下拉动作完成	function	---
e.reload	重新刷新	function	---
e.complete	不再下拉或者刷新，over	function	---

demo

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

vue

@everything-registry/sub-chunk-3189 @infinitebrahmanuniverse/nolb-xs

0.0.2

5 years ago

0.0.1

5 years ago