腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

uniapp自定義網(wǎng)絡(luò)檢測組件項(xiàng)目實(shí)戰(zhàn)總結(jié)分析

更新時(shí)間：2023年09月19日 14:35:52 作者：MarkGuan

這篇文章主要為大家介紹了uniapp自定義網(wǎng)絡(luò)檢測組件項(xiàng)目實(shí)戰(zhàn)總結(jié)分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

導(dǎo)語

很多時(shí)候手機(jī)設(shè)備會突然沒網(wǎng),這時(shí)候就需要一個(gè)網(wǎng)絡(luò)檢測組件,在沒網(wǎng)的時(shí)候顯示提示用戶,提供用戶體驗(yàn)。

準(zhǔn)備工作

在components新建一個(gè)q-online文件夾，并新建一個(gè)q-online.vue的組件；
按照前一篇所說的頁面結(jié)構(gòu)，編寫好預(yù)定的網(wǎng)絡(luò)檢測頁面；

原理分析

主要是使用uni.onNetworkStatusChange來判斷網(wǎng)絡(luò)狀態(tài)，然后根據(jù)狀態(tài)調(diào)整頁面樣式顯示網(wǎng)絡(luò)提示。

組件實(shí)現(xiàn)

準(zhǔn)備工作和原理分析完成后，接下來寫一個(gè)網(wǎng)絡(luò)檢測頁面。

模板部分

這里提供了兩種提示，一種是全屏顯示，一種是頂部顯示，支持自定義插槽。

<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">您的網(wǎng)絡(luò)已斷開，請檢查連接!</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;
      }
    }
  }
}

腳本部分

引入依賴包和屬性設(shè)置

import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
// 頁面屬性
let show = ref(false);
// 顯示類型
const props = defineProps({
  type: {
    type: String,
    default: "top", // top 頂部 full 全屏
  },
});
// 狀態(tài)發(fā)送
const emits = defineEmits(["change"]);

方法定義

// 頁面方法
// 顯示
onLoad((option) => {
  checkNet();
});
// 檢測網(wǎng)絡(luò)
function checkNet() {
  uni.onNetworkStatusChange((res) => {
    const status = res.isConnected;
    show.value = !status;
    emits("change", status);
    let title = status ? "網(wǎng)絡(luò)已連接!" : "網(wǎng)絡(luò)已斷開!",
      icon = status ? "success" : "error";
    uni.showToast({
      title,
      icon,
    });
  });
}

實(shí)戰(zhàn)演練

模板使用

<!-- 頂部風(fēng)格 -->
<q-online type="top" />
<!-- 全屏風(fēng)格 -->
<q-online type="full" @change="getNetStatus" />

腳本使用

// 獲取網(wǎng)絡(luò)狀態(tài)
function getNetStatus(val) {
  console.log(`網(wǎng)絡(luò)狀態(tài)：${val ? "有網(wǎng)" : "無網(wǎng)"}`);
}

案例展示

頂部效果

全屏效果

最后

以上就是uniapp自定義網(wǎng)絡(luò)檢測組件項(xiàng)目實(shí)戰(zhàn)總結(jié)分析的詳細(xì)內(nèi)容，更多關(guān)于uniapp網(wǎng)絡(luò)檢測組件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线