要做下拉刷新 上拉加载的功能 找了个详细的组件 但跟需求有差 根据组件调整
上代码，
新建组件refreshLoad.js
<template><div style="overflow: hidden; height: 100%"><divclass="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%;}
父页面调用
<refreshLoadclass="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},
