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

本组件使用的是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;}
}

具体使用如下
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/659469.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

springboot(ssm爱心商城系统 爱心捐赠商城系统Java系统

springboot(ssm同城上门喂遛宠物系统 宠物预约系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&a…

2023蓝帽初赛

APK取证 1.涉案apk的包名是&#xff1f;[答题格式:com.baid.ccs] 用雷电APP智能分析打开 在基本信息里得到应用包名 答案&#xff1a;com.vestas.app 2.涉案apk的签名序列号是&#xff1f;[答题格式:0x93829bd] 同理&#xff0c;在详细信息里面找到了签名序列号 答案&…

nodejs+vue+mysql校园失物招领网站38tp1

本高校失物招领平台是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了用户和管理员这两者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽可能优化界…

立体边界,让arcgis出图更酷炫一些

就是这样子的那个图—— 本期我们还是用长沙市为例&#xff0c; 来手把手的演示制作立体边界&#xff0c; 就是这个样子的边界—— 第一步—准备底图 其实你准备什么底图都可以哈&#xff0c;例如调用天地图、下载个影像图&#xff0c;或者用其他什么的底图&#xff0c;都是…

在ubuntu22.04中借助docker实现安装、调试ros1.0

一.安装docker 参考&#xff1a;https://www.cnblogs.com/cqpanda/p/16247919.html 使用安装方法1直接安装&#xff0c;没出问题&#xff0c;我就继续了。出问题按方法2安装吧。 curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 二.docker中安装ros1.…

基于微信小程序+Springboot线上租房平台设计和实现【三端实现小程序+WEB响应式用户前端+后端管理】

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

MATLAB矩阵的操作(第一部分)

矩阵的基本知识 矩阵概念 矩阵&#xff08;Matrix&#xff09;在数学中是一个由复数或实数组成的矩形阵列&#xff0c;其元素按照行和列排列。矩阵的定义可以形式化地描述为&#xff1a; 一个 m 行 n 列的矩阵是一个有序的数表&#xff0c;其中包含 m*n 个数&#xff0c;可以…

HG/T 3830-2022 预涂卷材涂料检测

预涂卷材涂料是指以树脂为主要成膜物质&#xff0c;并加入固化剂、颜料、体质颜料、助剂等配置而成&#xff0c;且以连续涂装方式涂覆在金属薄板上的溶剂型涂料、水性涂料或粉末涂料。 HG/T 3830-2022溶剂型和水性预涂卷材涂料检测项目&#xff1a; 测试指标 测试方法 在容器…

【乳腺肿瘤诊断分类及预测】基于PNN概率神经网络

课题名称&#xff1a;基于PNN的乳腺肿瘤诊断分类及预测 版本日期&#xff1a;2023-06-15 运行方式: 直接运行PNN0501.m 文件即可 代码获取方式&#xff1a;私信博主或QQ&#xff1a;491052175 模型描述&#xff1a; 威斯康辛大学医学院经过多年的收集和整理&#xff0c;建…

Java希尔排序

希尔排序是一种改进的插入排序算法&#xff0c;也称为缩小增量排序。它通过将待排序的数组按照一定的间隔分割成若干个子序列&#xff0c;然后对这些子序列进行插入排序&#xff0c;随着排序进行&#xff0c;逐渐减小间隔&#xff0c;直至间隔为1&#xff0c;最后对整个数组进行…

Selenium处理Alert弹窗

页面弹窗有 3 种类型&#xff1a; alert&#xff08;警告信息&#xff09; confirm&#xff08;确认信息&#xff09; prompt&#xff08;提示输入&#xff09; 对于页面出现的 alert 弹窗&#xff0c;Selenium 提供如下方法&#xff1a; 序号 方法/属性 描述 1 ac…

如何更改Outlook阅读邮件时的默认字体?

如果收到的邮件中未指定字体&#xff0c;outlook默认使用宋体显示。 如果觉得不好看&#xff0c;可以进行更改。但不是在outlook中更改&#xff0c;outlook中只是修改编辑器中的字体&#xff0c;和纯文本邮件浏览的字体&#xff0c;不能更改未指定字体的HTML邮件的显示字体。 …

TensorFlow2实战-系列教程5:猫狗识别2------数据增强

&#x1f9e1;&#x1f49b;&#x1f49a;TensorFlow2实战-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Jupyter Notebook中进行 本篇文章配套的代码资源已经上传 猫狗识别1 数据增强 猫狗识别2------数据增强 猫狗识别3------迁移学习 1、猫狗识别任…

C++:CSDN云服务器

每一次打开我的个人中心——&#xff08;T_T&#xff09; 1、右下角加载个不停...... &#xff08;耗时一分钟&#xff09; 2、闪白影...... &#xff08;耗时30秒&#xff09; 3、加载出浏览器...... &#xff08;耗时10秒&#xff09; 4、打开\加载网站...... &#xff0…

Unity 模板方法模式(实例详解)

文章目录 简介示例1&#xff1a;游戏关卡流程示例2&#xff1a;测试试卷类示例3&#xff1a;游戏场景构建流程示例4&#xff1a;游戏动画序列示例5&#xff1a;游戏对象初始化过程 简介 Unity中的模板方法模式是一种行为设计模式&#xff0c;它在父类中定义了一个算法的框架&a…

软件工程知识梳理5-实现和测试

编码和测试统称为实现。 编码&#xff1a;把软件设计结果翻译成某种程序设计语言书写的程序。是对设计的进一步具体化&#xff0c;是软件工程过程的一个阶段。 测试&#xff1a;单元测试和集成测试&#xff0c;软件测试往往占软件开发总工作量的40%以上。 编码&#xff1a;选…

【百度Apollo】自动驾驶规划技术:实现安全高效的智能驾驶

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下…

浏览器前进后退实现思路

1. 使用浏览器的历史对象&#xff1a; 浏览器提供了 window.history 对象&#xff0c;通过该对象可以访问浏览器的历史记录。 2. 前进&#xff08;Forward&#xff09;&#xff1a; 要实现前进操作&#xff0c;可以使用 window.history.forward() 方法。 // 前进一步 windo…

Unity之做一个最简单的FPS游戏demo

目录 &#x1f60b;FPS游戏Demo &#x1f4a4;1.新建FPS模板项目 ⚒️2.装备枪 &#x1f4a3;3.设置射击功能 &#x1f4fa;4.制造一个子弹预制体 &#x1f3ae;5.发射子弹 说起来小编学Unity差不多一个月了&#xff0c;都是利用上班摸鱼时间学的&#xff08;doge.jpg&…

FreeRTOS_Stm32F407系列单片机标准库移植

这里写目录标题 1、下载FreeRTOS源码1.1github仓库下载1.2官网下载1.3百度网盘下载 2、FreeRTOS移植2.1首先需要有一个可运行的标准库工程2.2在工程内创建一个FreeRTOS文件夹&#xff0c;然后在FreeRTOS文件夹中再新建port、include、src三个文件夹。2.3 port文件夹移植2.4 inc…