Loading 加载 Taro + vue3 自定义组件的封装和 分页 优化

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);//获取规则列表