CSS 实现页面底部加载中与加载完毕效果

效果图

实现代码

<view class="bottom-load-tip">
  <view class="line-tip"></view>
  <view class="loading-animation" v-if="!lastPage"></view>
  <view>{{ lastPage ? "没有更多了" : "加载中" }}</view>
  <view class="line-tip"></view>
</view>
/* 底部加载中 */
.bottom-load-tip {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 24rpx;
  margin-top: 20rpx;
  .line-tip {
    width: 10%;
    height: 1rpx;
    background: #c0c4cc;
    margin: 0 15rpx;
  }
  .loading-animation {
    position: relative;
    margin-right: 30rpx;
    margin-left: 8rpx;
  }
  .loading-animation::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 6rpx;
    height: 6rpx;
    color: rgba(0, 0, 0, 0.4);
    margin: auto;
    box-shadow: 0 -14rpx rgba(0, 0, 0, 0.9), 14rpx 0, 0 14rpx, -14rpx 0 rgba(0, 0, 0, 0.7), -10rpx -10rpx rgba(0, 0, 0, 0.8),
      10rpx -10rpx rgba(0, 0, 0, 1), 10rpx 10rpx, -10rpx 10rpx;
    animation: loading-spin 1s steps(8) infinite;
    border-radius: 100%;
  }
}
@keyframes loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自动化测试工具:Airtest入门教程

目录 1.什么是Airtest&#xff1f; 2.AirtestIDE下载安装 3.如何开始使用 4.Airtest入门特例教程 5.总结 1.什么是Airtest&#xff1f; Airtest是一款基于 Python 的、跨平台的UI自动化测试框架。因为它基于 图像识别 的原理&#xff0c;所以适用于所有 Android、 iOS和 …

边写代码边学习之Bidirectional LSTM

1. 什么是Bidirectional LSTM 双向 LSTM (BiLSTM) 是一种主要用于自然语言处理的循环神经网络。 与标准 LSTM 不同&#xff0c;输入是双向流动的&#xff0c;并且它能够利用双方的信息。 它也是一个强大的工具&#xff0c;可以在序列的两个方向上对单词和短语之间的顺序依赖…

Matlab绘制灰度直方图

直方图是根据灰图像绘制的&#xff0c;而不是彩色图像通。查看图像直方图时候&#xff0c;需要先确定图片是否为灰度图&#xff0c;使用MATLAB2019查看图片是否是灰度图片&#xff0c;在读取图片后在MATLAB界面的工作区会显示读取的图像矩阵&#xff0c;如果是&#xff0c;那么…

Cookie 和 Session 的工作流程

目录 一、Cookie是什么&#xff1f; 二、Session是什么? 三、Cookie的工作流程 四、Session的工作流程 五、Session和Cookie的区别和联系 一、Cookie是什么&#xff1f; Cookie是一种在网站和用户之间交换信息的机制。它是由Web服务器发送给用户浏览器的小型文本文件&#xff…

2023国赛数学建模思路 - 案例:异常检测

文章目录 赛题思路一、简介 -- 关于异常检测异常检测监督学习 二、异常检测算法2. 箱线图分析3. 基于距离/密度4. 基于划分思想 建模资料 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 一、简介 – 关于异常…

STM32--USART串口

文章目录 通信接口串口通信硬件电路电平标准参数时序 USART主要特性框图 数据帧发送器 波特率发生器SWART串口发送与接收工程串口收发数据包 通信接口 通信接口是指连接中央处理器&#xff08;CPU&#xff09;和标准通信子系统之间的接口&#xff0c;用于实现数据和控制信息在不…

GNN学习笔记

GNN 持续更新 实践程序放在了虚拟机里conda中NS环境里了 b站课程跳转------->>>>> 【不愧是公认最好的【图神经网络GNN/GCN教程】&#xff0c;从基础到进阶再到实战&#xff0c;一个合集全部到位&#xff01;-人工智能/神经网络/图神经网络/深度学习。】 https…

ubuntu 20.04 安装 高版本cuda 11.7 和 cudnn最新版

一、安装显卡驱动 参考另一篇文章&#xff1a;Ubuntu20.04安装Nvidia显卡驱动教程_ytusdc的博客-CSDN博客 二、安装CUDA 英伟达官网&#xff08;最新版&#xff09;&#xff1a;CUDA Toolkit 12.2 Update 1 Downloads | NVIDIA Developer CUDA历史版本下载地址&#xff1a;C…

vue3——递归组件的使用

该文章是在学习 小满vue3 课程的随堂记录示例均采用 <script setup>&#xff0c;且包含 typescript 的基础用法 一、使用场景 递归组件 的使用场景&#xff0c;如 无限级的菜单 &#xff0c;接下来就用菜单的例子来学习 二、具体使用 先把菜单的基础内容写出来再说 父…

STM32CubeMX配置STM32G0 Standby模式停止IWDG(HAL库开发)

1.打开STM32CubeMX选择好对应的芯片&#xff0c;打开IWDG 2.打开串口1进行调试 3.配置好时钟 4.写好项目名称&#xff0c;选好开发环境&#xff0c;最后获取代码。 5.打开工程&#xff0c;点击魔术棒&#xff0c;勾选Use Micro LIB 6.修改main.c #include "main.h"…

网络互联与互联网 - TCP 协议详解

文章目录 1 概述2 TCP 传输控制协议2.1 报文格式2.2 三次握手&#xff0c;建立连接2.3 四次挥手&#xff0c;释放连接2.4 四种拥塞控制 3 扩展3.1 实验演示3.2 网工软考 1 概述 在 TCP/IP 协议簇 中有两个传输协议 TCP&#xff1a;Transmission Control Protocol&#xff0c;传…

视频汇聚/视频云存储/视频监控管理平台EasyCVR提升网络稳定小tips来啦!

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

vue+file-saver+xlsx+htmlToPdf+jspdf实现本地导出PDF和Excel

页面效果如下&#xff08;echarts图表按需添加&#xff0c;以下代码中没有&#xff09; 1、安装插件 npm install xlsx --save npm install file-saver --save npm install html2canvas --save npm install jspdf --save2、main.js引入html2canvas import htmlToPdf from …

MyBatis分页思想和特殊字符

目录 一、MyBatis分页思想 1.1 使用场景 1.2 代码演示 二、MyBatis特殊字符 2.1代码演示 一、MyBatis分页思想 1.1 使用场景 Mybatis分页应用场景&#xff1a; MyBatis是一个Java持久层框架&#xff0c;它提供了一种将SQL查询和结果映射到Java对象的简单方式。分页是MyBa…

深度学习环境搭建 cuda、模型量化bitsandbytes安装教程 windows、linux

cuda、cudann、conda安装教程 输入以下命令&#xff0c;查看 GPU 支持的最高 CUDA 版本。 nvidia-smi cuda安装&#xff08;cudatoolkit&#xff09; 前往 Nvidia 的 CUDA 官网&#xff1a;CUDA Toolkit Archive | NVIDIA Developer CUDA Toolkit 11.8 Downloads | NVIDIA …

IO day 4

1、使用两个进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半内容&#xff0c;子进程拷贝后一半内容&#xff0c;并且父进程要阻塞回收子进程资源 #include <myhead.h>int main(int argc, const char *argv[]) {char a[1] {0};pid_t pid;pid fork();//创建一个子进…

学习网络编程No.4【socket编程实战】

引言 北京时间&#xff1a;2023/8/19/23:01&#xff0c;耍了好几天&#xff0c;主要归咎于《我欲封天》这本小说&#xff0c;听了几个晚上之后逐渐入门&#xff0c;在闲暇时间又看了一下&#xff0c;小高潮直接来临&#xff0c;最终在三个昼夜下追完了&#xff0c;哈哈哈&…

开放网关架构演进

作者&#xff1a;庄文弘&#xff08;弘智&#xff09; 淘宝开放平台是阿里与外部生态互联互通的重要开放途径&#xff0c;通过开放的产品技术把阿里经济体一系列基础服务&#xff0c;像水、电、煤一样输送给我们的商家、开发者、社区媒体以及其他合作伙伴&#xff0c;推动行业的…

如何利用SFTP如何实现更安全的远程文件传输 ——【内网穿透】

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《高效编程技巧》《cpolar》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 1. 安装openSSH1.1 安装SSH1.2 启动ssh 2. 安装cpolar2.1 配置termux服务 3. 远程SFTP连接配置3.1 查看生成的随机公…

openGauss学习笔记-46 openGauss 高级数据管理-子查询

文章目录 openGauss学习笔记-46 openGauss 高级数据管理-子查询46.1 SELECT语句中的子查询使用46.2 INSERT语句中的子查询使用46.3 UPDATE语句中的子查询使用46.4 DELETE语句中的子查询使用 openGauss学习笔记-46 openGauss 高级数据管理-子查询 子查询或称为内部查询&#xf…