微信小程序～上推加载更多组件
本组件使用的是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;}
}具体使用如下
