uniapp项目实践总结(十一)自定义网络检测组件

导语:很多时候手机设备会突然没网,这时候就需要一个网络检测组件,在没网的时候显示提示用户,提供用户体验。

目录

  • 准备工作
  • 原理分析
  • 组件实现
  • 实战演练
  • 案例展示

准备工作

  • components新建一个q-online文件夹,并新建一个q-online.vue的组件;
  • 按照前一篇所说的页面结构,编写好预定的网络检测页面;

原理分析

主要是使用uni.onNetworkStatusChange来判断网络状态,然后根据状态调整页面样式显示网络提示。

组件实现

准备工作和原理分析完成后,接下来写一个网络检测页面。

模板部分

这里提供了两种提示,一种是全屏显示,一种是顶部显示,支持自定义插槽。

<view class="q-online" v-if="show"><slot name="content"><view :class="{'q-online-inner': true, [props.type]: true}"><q-iconclass="q-online-icon":name="props.type == 'top' ? 'info-circle' : 'wifi'":size="props.type == 'top' ? 20 : 52"color="#f30d0d" /><text class="q-online-txt">您的网络已断开,请检查连接!</text></view></slot>
</view>

样式部分

.q-online {.q-online-inner {display: flex;justify-content: center;align-items: center;width: 100%;height: 100rpx;background: $netBg;.q-online-icon {margin-right: 20rpx;}.q-online-txt {color: $netColor;font-size: 30rpx;}&.full {position: absolute;top: 0;left: 0;flex-direction: column;height: 100%;background: $white;z-index: 39;.q-online-txt {margin-top: 30rpx;font-size: 36rpx;}}}
}

脚本部分

  • 引入依赖包和属性设置
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";// 页面属性
let show = ref(false);// 显示类型
const props = defineProps({type: {type: String,default: "top", // top 顶部 full 全屏},
});// 状态发送
const emits = defineEmits(["change"]);
  • 方法定义
// 页面方法// 显示
onLoad((option) => {checkNet();
});// 检测网络
function checkNet() {uni.onNetworkStatusChange((res) => {const status = res.isConnected;show.value = !status;emits("change", status);let title = status ? "网络已连接!" : "网络已断开!",icon = status ? "success" : "error";uni.showToast({title,icon,});});
}

实战演练

模板使用

<!-- 顶部风格 -->
<q-online type="top" />
<!-- 全屏风格 -->
<q-online type="full" @change="getNetStatus" />

脚本使用

// 获取网络状态
function getNetStatus(val) {console.log(`网络状态:${val ? "有网" : "无网"}`);
}

案例展示

  • 顶部效果
    在这里插入图片描述
    在这里插入图片描述

  • 全屏效果
    在这里插入图片描述
    在这里插入图片描述

最后

以上就是自定义网络检测组件的主要内容,有不足之处,请多多指正。

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

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

相关文章

[刷题记录]牛客面试笔刷TOP101

牛客笔试算法必刷TOP101系列,每日更新中~ 1.合并有序链表2023.9.3 合并两个排序的链表_牛客题霸_牛客网 (nowcoder.com) 题意大致为: 将两个链表中的元素按照从小到大的顺序合并成为一个链表. 所给予的条件: 给出的所要合并的链表都是从小到大顺序排列的. 思路: 创建一…

[Java]异常

目录 1.异常的概念与体系结构 1.1异常的概念 1.1.1算术异常 1.1.2数组越界异常 1.1.3空指针异常 1.2异常的体系结构 1.3异常的分类 2.异常的处理 2.1 防御式编程 2.2异常的抛出 2.3异常的捕获 2.3.1 异常声明throws 将光标放在抛出异常方法上&#xff0c;alt Insert …

SAC算法

SAC算法 全称Soft Actor-Critic算法&#xff0c;为优化目标引入了熵约束项&#xff0c;增大了动作的探索性&#xff0c;避免陷入局部最优解&#xff0c;原论文 继承了Soft Q-Learning提出了Soft Policy Iteration&#xff0c;进而推导了Soft Actor-Critic参数更新时机&#xff…

RCU501 RMP201-8 KONGSBERG 分布式处理单元

RCU501 RMP201-8 KONGSBERG 分布式处理单元 AutoChief600使用直接安装在主机接线盒中的分布式处理单元。进出发动机的所有信号都在双冗余CAN线路(发动机总线)上传输。 所有不重要的传感器都可以与K-Chief 600报警和监控系统共享&#xff0c;只需要一个主机接口。这一原则大大…

Redis之SDS底层原理解读

目录 SDS是什么&#xff1f; SDS结构示例 概述 空间预分配 惰性空间释放 C字符串跟SDS的区别&#xff1f;为什么用SDS&#xff1f; SDS是什么&#xff1f; Redis 底层的程序语言是由 C 语言编写的&#xff0c;C 语言默认字符串则是以空字符结尾的字符数组&#xff08…

【C++】异常

目录 一、概念二、异常的使用1、异常的抛出和捕获2、异常的重新抛出3、异常安全4、异常规范 三、自定义异常体系四、C标准库的异常体系五、异常的优缺点 一、概念 传统的错误处理机制&#xff1a; 终止程序&#xff0c;如assert&#xff0c;缺陷&#xff1a;用户难以接受。如…

Apache Tomcat漏洞复现

文章目录 弱口令启动环境漏洞复现 本地文件包含启动环境漏洞复现 弱口令 启动环境 来到vulhub/tomcat/tomcat8/靶场 cd vulhub/tomcat/tomcat8/安装环境并启动&#xff1a; sudo docker-compose up -d && sudo docker-compose up -d修改端口后启动&#xff1a; su…

十七、MySQL约束演示

1、约束定义 &#xff08;1&#xff09;概念 约束&#xff0c;顾名思义&#xff0c;时作用域表中字段上的规则&#xff0c;用于限制存储在表中的数据&#xff0c;主要用于保证数据库中数据的正确、有效性和完整性。 &#xff08;2&#xff09;各种约束分类 1、非空约束(限制…

企业网络小实验-MUX-Vlan(NAT)

路漫漫其修远兮&#xff0c;吾将上下而求索 直接上实验 实验说明 模拟公司的部门实验&#xff0c; &#xff08;1&#xff09;公司主机如图所示&#xff0c;配置DNS服务器&#xff0c;配置NAT地址转换&#xff08;使用easy-ip的形式&#xff09;访问外网。 &#xff08;2&…

go语言的高级特性

go语言调用C语言 go tool cgo main.go

【JAVA】面向对象的编程语言(继承篇)

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言继承类的继承方式继承的各种类型多继承继承的特性各种继承关键字extends关键字implements关键字super 与 this 关键字super 关键字this 关键字 final 关键字 前言 在之前的…

Java中网络的基本介绍。网络通信,网络,ip地址,域名,端口,网络通信协议,TCP/IP传输过程,网络通信协议模型,TCP协议,UDP协议

- 网络通信 概念&#xff1a;网络通信是指通过计算机网络进行信息传输的过程&#xff0c;包括数据传输、语音通话、视频会议等。在网络通信中&#xff0c;数据被分成一系列的数据包&#xff0c;并通过网络传输到目的地。在数据传输过程中&#xff0c;需要确保数据的完整性、准…

【EI/SCOPUS会议征稿】第二届环境遥感与地理信息技术国际学术会议(ERSGIT 2023)

第二届环境遥感与地理信息技术国际学术会议 2023 2nd International Conference on Environmental Remote Sensing and Geographic Information Technology 第二届环境遥感与地理信息技术国际学术会议&#xff08;ERSGIT 2023&#xff09;定于2023年11月10-12日在中国陕西西安…

“搞事情”?OpenAl将于11月召开其首届开发者大会

摘要&#xff1a;OpenAI也要召开它的第一届开发者大会了。这次活动&#xff0c;或许标志着OpenAI向其下一阶段的商业开发迈出了关键一步。 昨天&#xff0c;OpenAI宣布将于11月6日举办其首次开发者大会。在这场名为“OpenAI DevDay”的活动中&#xff0c;OpenAI的技术人员将进行…

10、哈希函数与哈希表

哈希函数 出现次数最多的 32G 小文件方法&#xff1a;利用哈希函数在种类上均分 设计RandomPool结构 设计一种结构&#xff0c;在该结构中有如下三个功能: insert(key):将某个key加入到该结构&#xff0c;做到不重复加入 delete(key):将原本在结构中的某个key移除 getRando…

【Sentinel】Sentinel与gateway的限流算法

文章目录 1、Sentinel与Hystrix的区别2、限流算法3、限流算法对比4、Sentinel限流与Gateway限流 1、Sentinel与Hystrix的区别 线程隔离有两种方式实现&#xff1a; 线程池隔离&#xff08;Hystrix默认采用&#xff09;信号量隔离&#xff08;Sentinel默认采用&#xff09; 服…

vue 分页器组件+css动画效果

全网都找了一遍没有找到符合UI需求的分页动画&#xff0c;于是就主动上手了 需求&#xff1a; 1、分页最多显示9页&#xff0c;总页数最多显示无上限&#xff1b; 2、点击下一页的时候需要有动画效果过度&#xff0c;如果当前页数是当前显示最后的一页&#xff0c;则停了当前…

337. 打家劫舍 III

337. 打家劫舍 III C代码&#xff1a;二叉树 动态规划 typedef struct { // 每个节点都有两个状态&#xff1a;选中、不选中int selected;int notSelected; } SubtreeStatus;SubtreeStatus dfs(struct TreeNode *node) {if (!node) {return (SubtreeStatus){0, 0};}SubtreeS…

FPGA实战小项目2

基于FPGA的贪吃蛇游戏 基于FPGA的贪吃蛇游戏 基于fpga的数字密码锁ego1 基于fpga的数字密码锁ego1 基于fpga的数字时钟 basys3 基于fpga的数字时钟 basys3

【人月神话】重新探索人月神话:软件工程的现实与挑战

人月神话是一篇由美国软件工程师弗雷德里克布鲁克斯所写的软件工程经典之作&#xff0c;最早发表于1975年。这篇文章的全名是《人月神话&#xff1a;软件工程的神话与现实》&#xff08;The Mythical Man-Month: Essays on Software Engineering&#xff09;&#xff0c;它涵盖…