0.0.4 • Published 6 years ago

wechat-miniprogram-skeleton v0.0.4

Weekly downloads
3
License
MIT
Repository
github
Last release
6 years ago

wechat-miniprogram-skeleton

小程序骨架屏效果组件

下载

git clone https://github.com/simsir-lin/wechat-miniprogram-skeleton.git

示例

  1. 打开微信web开发者工具,'本地小程序项目 - 添加项目',项目目录选择为 example 目录

使用

  1. 安装,在你的项目根目录执行
npm install --save wechat-miniprogram-skeleton
  1. 每次引入或更新需先执行微信开发者工具的 npm 构建微信官方 npm 文档
  2. 在你的页面json中添加
{
  "usingComponents": {
    "skeleton": "wechat-miniprogram-skeleton/skeleton",
    "skeleton-item": "wechat-miniprogram-skeleton/skeleton-item"
  }
}
  1. 在wxml中即可使用组件
<skeleton loading="{{!loading}}">
  <skeleton-item placeholder-class="skeleton-text" content-class="normal-text">文字</skeleton-item>
  <skeleton-item placeholder-class="skeleton-block">
    <view class="normal-block">测试文字</view>
  </skeleton-item>
</skeleton>

注意

  • 小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始

skeleton props

namedescriptiontypedefault value
width宽度String100%
height高度String100rpx
backgroundColor背景颜色Stringrgba(255, 255, 255, 1)
zIndexNumber10
loading是否在加载中Booleanfalse

skeleton-item props

namedescriptiontypedefault value
backgroundColor背景颜色String#f4f4f4

贡献

如果你有好的意见或建议,欢迎给我提issue!