ant-skeleton

小程序白屏兜底组件库

Usage no npm install needed!

<script type="module">
  import antSkeleton from 'https://cdn.skypack.dev/ant-skeleton';
</script>

README

安装

$ npm install ant-skeleton --save

提供的组件列表

  • ant-skeleton： 骨架屏UI
  • ant-page-result： 数据获取异常提示UI

骨架屏UI接入

在页面json中文件中进行注册

{
   "usingComponents": {
    "ant-skeleton":"ant-skeleton/components/skeleton/skeleton"
  }
}

在axml文件中进行调用：

<view>
  <ant-skeleton a:if="{{isLoading}}"/>
  <view a:else class="content">
     <!-- 业务视图 -->
  </view>
</view>

异常兜底提示UI接入

在页面json中文件中进行注册

{
  "usingComponents" : {
    "ant-page-result" : "ant-skeleton/components/pageResult/pageResult"
  }
}

在axml文件中进行调用：

<view>
  
  <!-- 网络异常或超时，展示友好兜底提示 -->
  <view a:if="{{apiResultException}}">
    <ant-page-result url="https://gw.alipayobjects.com/mdn/rms_997765/afts/img/A*J-gFS7ezs-0AAAAAAAAAAABkARQnAQ" title="页面遇到一些问题" subTitle="请稍后再试"> </ant-page-result>
  </view>

  <!-- 网络正常结果返回，展示业务视图 -->
  <view a:else class="content">
    <!-- 业务视图 -->
    <!-- 业务视图 -->
    <!-- 业务视图 -->
  </view>

</view>

【推荐】骨架屏 + 异常兜底提示UI接入

在页面json中文件中进行注册

{
  "usingComponents" : {
    "ant-skeleton":"ant-skeleton/components/skeleton/skeleton",
    "ant-page-result" : "ant-skeleton/components/pageResult/pageResult"
  }
}

在axml文件中进行调用：

<view>
  <!-- 加载中，显示骨架屏 -->
  <ant-skeleton a:if="{{isLoading}}"/>
  
  <view a:else class="content">
    
    <!-- 网络异常或超时，展示友好兜底提示 -->
    <view a:if="{{apiResultException}}">
      <ant-page-result url="https://gw.alipayobjects.com/mdn/rms_997765/afts/img/A*J-gFS7ezs-0AAAAAAAAAAABkARQnAQ" title="页面遇到一些问题" subTitle="请稍后再试"> </ant-page-result>
    </view>

    <!-- 网络正常结果返回，展示业务视图 -->
    <view a:else>
      <!-- 业务视图 -->
      <!-- 业务视图 -->
      <!-- 业务视图 -->
    </view>

  </view>

</view>

贡献

如果你有好的意见或建议，欢迎给我们提issue。