导语：很多时候手机设施会忽然没网,这时候就须要一个网络检测组件,在没网的时候显示提醒用户,提供用户体验。

目录

  • 筹备工作
  • 原理剖析
  • 组件实现
  • 实战演练
  • 案例展现

筹备工作

  • 在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-icon        class="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 ? "有网" : "无网"}`);}

案例展现

  • 顶部成果

  • 全屏成果

最初

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