微信小程序～上推加载更多组件

news2024/10/6 18:26:57

本组件使用的是Taro+React 实现的，具体代码如下
一共分为tsx和less文件

//index.tsx
/** RefreshLoading
 * @description 上推加载更多组件
 * @param loading boolean
 * @param style
 * @returns
 */

import { View } from "@tarojs/components";
import React, { FC } from "react";
import styles from "./styles.module.less";

interface IProps {
  loading: boolean;
  style?: React.CSSProperties;
  hasMore?: boolean;
}

const RefreshLoading: FC<IProps> = ({
  loading = false,
  style = {},
  hasMore = true,
}) => {
  return (
    <View className={styles.wrap}>
      {loading ? (
        <View className={styles.refreshLoading} style={style}>
          <View className={styles.animate}>
            {[1, 2, 3].map((item) => (
              <View className={styles.point} key={item} />
            ))}
          </View>
          <View className={styles.text}>数据加载中</View>
        </View>
      ) : !hasMore ? (
        <View className={styles.hasMore}>没有更多了</View>
      ) : (
        <></>
      )}
    </View>
  );
};

export default RefreshLoading;

//less文件
.wrap {
  padding: 0 0 10px 0;
}

.refreshLoading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;

  .animate {
    font-size: 0;
    .point {
      display: inline-block;
      width: 12 * 0.5px;
      height: 12 * 0.5px;
      margin-right: 4 * 0.5px;
      background: #00c8c8;
      border-radius: 50%;
      animation: load 0.65s ease infinite;

      &:last-child {
        margin-right: 0;
      }

      &:nth-of-type(1) {
        animation-delay: 0.13s;
      }

      &:nth-of-type(2) {
        animation-delay: 0.26s;
      }

      &:nth-of-type(3) {
        animation-delay: 0.39s;
      }
    }
  }

  .text {
    margin-left: 8px;
    color: #999;
    font-size: 12px;
  }
}

.hasMore {
  text-align: center;
  color: #999;
  font-size: 12px;
}

@keyframes load {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}