赞
踩
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);//获取规则列表
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。