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

• 移动开发

本组件使用的是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 = ({
  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 className={styles.text}>数据加载中
        
      ) : !hasMore ? (
        <View className={styles.hasMore}>没有更多了
      ) : (
        
      )}
    
  );
};

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;
  }
}

具体使用如下

在这里插入图片描述

在这里插入图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/7171fd9a6e.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐