vue榜单里面的下拉刷新和上滑刷新，对应着scroll里面的一个榜单或者同时的两个榜单
直接上代码：
<template lang="html">
<div class="yo-scroll"
:class="{'down':(state===0),'up':(state==1),refresh:(state===2),touch:touching}"
@touchstart="touchStart($event)"
@touchmove="touchMove($event)"
@touchend="touchEnd($event)"
@scroll="(onInfinite || infiniteLoading) ? onScroll($event) : undefined">
<section class="inner">
<header class="pull-refresh">
<slot name="pull-refresh">
<span class="down-tip"></span>
<span class="up-tip"></span>
<span class="refresh-tip"></span>
</slot>
</header>
<slot></slot>
<footer class="load-more" >
<slot name="load-more">
<span v-show="this.state === 2">加载中……</span>
</slot>
</footer>
</section>
</div>
</template>
<script>
export default {
props: {
offset: {
type: Number,
default: 40
},
enableInfinite: {
type: Boolean,
default: true
},
enableRefresh: {
type: Boolean,
default: true
},
onRefresh: {
type: Function,
default: undefined,
required: false
},
onInfinite: {
type: Function,
default: undefined,
require: false
}
},
data() {
return {
top: 0,
state: 0,
startY: 0,
touching: false,
infiniteLoading: false,
}
},
methods: {
touchStart(e) {
this.startY = e.targetTouches[0].pageY
this.startScroll = this.$el.scrollTop || 0
this.touching = true
},
touchMove(e) {
if (!this.enableRefresh || this.$el.scrollTop > 0 || !this.touching) {
return
}
let diff = e.targetTouches[0].pageY - this.startY - this.startScroll
if (diff > 0) e.preventDefault()
this.top = Math.pow(diff, 0.8) + (this.state === 2 ? this.offset : 0)
if (this.state === 2) { // in refreshing
return
}
if (this.top >= this.offset) {
this.state = 1
} else {
this.state = 0
}
},
touchEnd(e) {
if (!this.enableRefresh) return
this.touching = false
if (this.state === 2) { // in refreshing
this.state = 2
this.top = this.offset
return
}
if (this.top >= this.offset) { // do refresh
this.refresh()
} else { // cancel refresh
this.state = 0
this.top = 0
}
},
refresh() {
this.state = 2
this.top = this.offset
this.onRefresh(this.refreshDone)
},
refreshDone() {
this.state = 0
this.top = 0
},
infinite() {
this.infiniteLoading = true
this.onInfinite(this.infiniteDone)
},
infiniteDone() {
this.infiniteLoading = false
},
onScroll(e) {
if (!this.enableInfinite || this.infiniteLoading) {
return
}
let outerHeight = this.$el.clientHeight
let innerHeight = this.$el.querySelector('.inner').clientHeight
let scrollTop = this.$el.scrollTop
let ptrHeight = this.onRefresh ? this.$el.querySelector('.pull-refresh').clientHeight : 0
let infiniteHeight = this.$el.querySelector('.load-more').clientHeight
let bottom = innerHeight - outerHeight - scrollTop - ptrHeight
if (bottom < infiniteHeight) this.infinite()
}
}
}
</script>
<style>
.yo-scroll {
position: absolute;
height: 11.2rem;
top: 1.5rem;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.yo-scroll .inner {
position: absolute;
top: -2rem;
width: 96%;
margin: 0 2%;
transition-duration: 300ms;
padding-bottom: 2rem;
/* overflow: scroll; */
}
.yo-scroll .pull-refresh {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.yo-scroll.touch .inner {
transition-duration: 0ms;
}
.yo-scroll.down .down-tip {
display: block;
}
.yo-scroll.up .up-tip {
display: block;
}
.yo-scroll.refresh .refresh-tip {
display: block;
}
.yo-scroll .down-tip,
.yo-scroll .refresh-tip,
.yo-scroll .up-tip {
display: none;
}
.yo-scroll .load-more {
height: 1rem;
display: flex;
align-items: center;
justify-content: center;
}
</style>
上面是vue下拉上滑的刷新组件
将其保存到项目里面，在需要使用的组件中去引用。
使用
<v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" v-if="content.length>0">
</v-scroll>
import Scroll from './loading.vue';
components: {
"v-scroll": Scroll,
},
下拉刷新：
// 下拉方法
onRefresh(done) {
// this.getList();
done(); // call done
},
上滑刷新
onInfinite(done) {
let vm = this;
console.log(vm);
let i = vm.pageStart;
let end = vm.pageEnd;
for (; i < end; i++) {
let obj = {};
vm.downdata.push(obj);
if ((i + 1) >= res.data.length) {
this.$el.querySelector('.load-more').style.display = 'none';
return;
}
}
done() // call done
｝
切记，一定要在函数中写入done(),否则只会刷新一次，不能做到重复下拉或者上滑。
网友评论