要做下拉刷新 上拉加载的功能 找了个详细的组件 但跟需求有差 根据组件调整
上代码,
新建组件 refreshLoad.js
<template>
<div style="overflow: hidden; height: 100%">
<div
class="my-scroll"
:class="[scrollState ? 'prohibit' : 'allow']"
ref="myScroll"
id="center"
@scroll.passive="onScroll($event)"
@touchmove="onScroll($event)"
>
<!-- top -->
<div class="scroll-list">
<slot name="scrollList"></slot>
<div class="scroll-bottom">
<div v-if="state == 1">
<p>加载中</p>
</div>
<div v-if="state == 2">加载完成</div>
<div v-if="state == 3">没有数据了</div>
</div>
</div>
</div>
<div class="backTop" v-if="backTop" @click="BackTop">
<!-- <img src="../../assets/image/fhtop.png" alt="" srcset="" /> -->
</div>
</div>
</template>
<script>
export default {
name: "myScroll",
props: {
onPull: {
// 加载回调
type: Function,
require: true,
},
scrollState: {
// 是否可滑动
type: Boolean,
require: true,
},
loaded: {
type: Boolean,
default() {
return false;
},
},
},
data() {
return {
timeoutId: null,
state: 0,
myScroll: null,
backTop: false,
};
},
methods: {
/*
* 加载中:1
* 加载完成:2
* 没有更多:3
*/
setState(index) {
// 修改状态
this.state = index;
console.log(this.state);
},
onScroll(e) {
const _this = this;
if (_this.myScroll.scrollTop > 0) {
_this.backTop = true;
}
if (_this.myScroll.scrollTop < window.innerHeight / 2) {
_this.backTop = false;
}
if (
!_this.loaded &&
window.innerHeight + _this.myScroll.scrollTop >=
_this.myScroll.scrollHeight - 300
) {
clearTimeout(this.timeoutId);
_this.timeoutId = setTimeout(() => {
_this.bottomCallback();
}, 600);
}
},
bottomCallback() {
// 加载回调
// console.log('回调', new Date().getTime())
if (this.state != 3) {
this.state = 1;
this.onPull();
}
},
//返回顶部
BackTop() {
const that = this;
let timer = setInterval(() => {
if (that.myScroll.scrollTop > 0) {
that.myScroll.scrollTop -= 200;
}
if (that.myScroll.scrollTop === 0) {
that.backTop = false;
clearInterval(timer);
}
}, 16);
},
},
mounted() {
this.myScroll = this.$refs.myScroll; // 获取滑条dom
},
};
</script>
.prohibit {
max-width: 100%;
max-height: 100%;
height: 100%;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
will-change: transform;
transition: all 450ms;
backface-visibility: hidden;
perspective: 1000;
}
.allow {
overflow: hidden;
height: auto;
}
.backTop {
position: fixed;
z-index: 99999;
bottom: 60px;
right: 10px;
width: 50px;
}
img {
width: 100%;
}
父页面调用
<refreshLoad
class="scrolls"
ref="myScroll"
:on-pull="getData"
:loaded="loaded"
:scroll-state="scrollState"
>
<div slot="scrollList">
<div class="casebox">
<ul class="caseList" v-if="list && list.length">
<li >
</li>
</ul>
<div class="nodata" v-else>
<img class="img_ cen" src="@/assets/image/nodata.png" alt="" />
<div class="text_">暂无数据</div>
</div>
</div>
</div>
</refreshLoad>
if (res.code == 0 && res.data.content.length > 0 && !this.loaded) {
// this.list = res.data.content;
if (this.pageList.page == 0) {
this.list = res.data.content;
} else {
this.list.push(...res.data.content);
}
this.pageList.page++;
this.$refs.myScroll.setState(2);
this.$store.dispatch("setLoading", false);
}
引用组件
import refreshLoad from "@/components/refreshLoad";
export default {
components: {
refreshLoad
},