更新记录
1.0.3(2021-08-31) 下载此版本
1.0.3 增加动画样式16
1.0.2(2021-08-31) 下载此版本
1.0.2 增加3个loading动画样式
1.0.1(2021-08-29) 下载此版本
1.0.1 解决nomore被覆盖问题
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.1.0 | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
zetank-loading
loading组件,包含加载更多、无数据、遮罩加载、无更多。组件使用loading样式一部分采用w-loading
安装
下载组件到项目即可,本组件符合easycom规范
使用
在template使用
/* 遮罩加载 */
<zetank-loading :show="true" ref="loading" text = "加载中" type="fullloading" textcolor="gray" textsize="28">
<loading2></loading2>
</zetank-loading>
/* 加载更多 */
<zetank-loading :show="loading" text = "加载中" type="bottomloading" textcolor="gray" textsize="28">
<loading8></loading8>
</zetank-loading>
/* 无更多 */
<zetank-loading :show="nomore" type="nomore" textcolor="gray" textsize="28"></zetank-loading>
/* 无数据 */
<zetank-loading :show="isempty" text = "暂无数据" type="nodata" textcolor="gray" textsize="28"></zetank-loading>
属性
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
show | Boolean | false | 是否显示 |
text | String | - | 文字 内容 |
textcolor | String | gray | 文字颜色 |
textsize | Number | 28 | 文字大小 |
type | String | fullloading | 类型(fullloading、bottomloading、nomore、nodata) |
emptyImages | String | - | 无数据图片url |
imagewidth | Number | 500 | 无数据图片宽 |
imageheight | Number | 500 | 无数据图片高 |
bgcolor | String | #ffffff | 背景颜色 |