NoNetwork 无网络提示

该组件无需任何配置,引入即可,内部自动处理所有功能和事件,有如下特点:

  • 如果没有网络,改组件会以fixed定位,并且以很大的z-index值覆盖原来的内容。一旦有网络了,会自动隐藏该组件,实现自动化
  • 在APP上,嵌入了5+接口,可以直接打开手机的设置页面,方便用户进行网络相关的设置

说明

  1. 应用有网络时,是不会触发本组件的,为了测试此功能,请关闭手机的数据连接以及WiFi即可
  2. 由于普通的组件无法覆盖原生组件,所以本组件不适用那些有videomap等原生表现的组件的页面,可以自行使用uni的cover-view组件修改

平台差异说明

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

  1. <template>
  2. <view>
  3. <view class="u-text">
  4. 这里是页面正式内容
  5. </view>
  6. <u-no-network></u-no-network>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. }
  12. </script>
  13. <style lang="scss" scoped>
  14. .u-text {
  15. padding-top: 300rpx;
  16. font-size: 30rpx;
  17. color: $u-type-primary;
  18. text-align: center;
  19. }
  20. </style>

API

Props

参数说明类型默认值可选值
tips没有网络时的提示语String哎呀,网络信号丢失-
zIndex组件的z-indexString | Number1080-
image无网络的图片提示,可用的src地址或base64图片String--

Events

事件名说明回调参数
retry用户点击页面的”重试”按钮时触发-