53 lines
852 B
Vue
53 lines
852 B
Vue
<template>
|
|
<view class="network-status" v-if="!isConnected">
|
|
<view class="network-tip">
|
|
<text>当前无网络连接</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'network-status',
|
|
data() {
|
|
return {
|
|
isConnected: true
|
|
}
|
|
},
|
|
created() {
|
|
// 监听网络状态变化
|
|
uni.onNetworkStatusChange((res) => {
|
|
this.isConnected = res.isConnected
|
|
})
|
|
// 初始检查网络状态
|
|
this.checkNetwork()
|
|
},
|
|
methods: {
|
|
checkNetwork() {
|
|
uni.getNetworkType({
|
|
success: (res) => {
|
|
this.isConnected = res.networkType !== 'none'
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.network-status {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 9999;
|
|
|
|
.network-tip {
|
|
background-color: #ff4d4f;
|
|
color: #fff;
|
|
text-align: center;
|
|
padding: 10rpx 0;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
</style> |