@retailwe/ui-loading-content NPM

loading-content 加载状态，用于占位

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-loading-content": "@retailwe/ui-loading-content/index"
}

代码演示

基础用法，铺满父容器

<wr-loading-content>loading</wr-loading-content>

绝对定位，遮盖父容器的内容

注意： 需配合将父容器的 position 为 relative

<view
  style="width: 100%; height: 200rpx; background-color: yellow; position: relative;"
>
  容器内容
  <wr-loading-content position="absolute">loading</wr-loading-content>
</view>

绝对定位，遮盖窗口

<wr-loading-content position="fixed">loading</wr-loading-content>

API

loading-content Props

参数	说明	类型	默认值	版本
type	类型，可选值`circular`和`spinner`	string	`circular`	-
vertical	文字是否显示在 loading 下方	boolean	`false`	-
size	loading 的大小	string	`50rpx`	-
textSize	文字的大小	string	`24rpx`	-
color	loading 的颜色	string	`#c8c9cc`	-