1.需求

  当需要实现一个组件 上拉加载的组件 我们可以选择某些组件库的组件。

  但是有的组件没有这个组件，比如跟Taro 框架配套的京东nut-ui组件库 没有提供这个功能,

2.Loading组件

①封装

<template><div class="container"><div class="tip" v-if="page >= total && tipFlag">没有更多数据了呢~</div><div class="loading-box" v-if="loadingFlag && page <= total"><div class="loading-box-text"><div class="loading"></div><div class="text">正在加载中...</div></div></div><div style="height: 50px;"></div></div>
</template>
<script setup>
import { ref, toRefs } from "vue";
const props = defineProps({page: Number, //接受页数total: Number, //接收总页数loadingFlag: Boolean, //是否正在加载数据tipFlag: Boolean, //是否显示 "没有更多数据的提示"
});
const { pag, total, loadingFlag, tipFlag } = toRefs(props)
</script>
<style lang="scss">
.container {padding: 30px;.tip {color: #858a99;font-size: 24px;text-align: center;margin: 5px;}.loading-box {display: flex;justify-content: center;align-items: center;margin-bottom: 6px;.loading-box-text {display: flex;align-items: center;color: #858a99;.text {font-size: 18px;margin-left: 8px;}.loading {width: 14px;height: 14px;border: 2px solid #858a99;border-top-color: transparent;border-radius: 100%;text-align: center;animation: circle infinite 0.75s linear;}// 转转转动画@keyframes circle {0% {transform: rotate(0);}100% {transform: rotate(360deg);}}}}
}
</style>

② 使用 

   <Loading :page="pageinfo.currentPage" :total="totalpage" :loadingFlag="loadingFlag":tipFlag="tipFlag"></Loading>

3.分页节流的使用

//分页 节流
const throttle = (func, delay) => {let lastTime = 0;return function () {const now = new Date().getTime();if (now - lastTime >= delay) {func.apply(this, arguments);lastTime = now;}};
}
//分页
const onScrollBottom = throttle(() => {console.log("到底了");loadingFlag.value = true;tipFlag.value = false;if (pageInfo.value.currentPage < total.value) {pageInfo.value.currentPage++;getRuleList(1);} else {loadingFlag.value = false;tipFlag.value = true;}
}, 200);// 在绑定滚动事件时使用 onScrollBottom
window.addEventListener('scroll', onScrollBottom);//获取规则列表