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

1.需求

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

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

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