Skip to content

laishiwen/skeletons

Repository files navigation

skeletons

首屏渲染-小程序骨架屏动态注入组件

demo

skeletons组件中的默认值表格

属性 类型 默认 可选 备注
selector String 'skeletons' 建议‘skeletons’写入容器class,默认wx.getSystemInfoSync()
background String '#FFF'
block_animation String 'shine' 'shine' || 'gradient'
loading String 'music' 'music' || 'shine'
is_captrue Boolean false 抓取节点控制
is_complete Boolean false 渲染关闭控制

节点类 备注
skeletons-rect 正方形
skeletons-circle 圆形
skeletons-... 陆续开放

列举案例的使用方法,老司机喵一眼就懂~

    <!-- index.wxml include skeletons component -->
    
    <view class="container skeletons">
        <view class="author skeletons-circle">
            Titan_star
        </view>
        <view class="skeletons-rect">
            <text>
            首屏渲染-小程序骨架屏动态注入组件
            </text>
        </view>
        <view class="usermotto">
            <text class="user-motto skeletons-rect">Hello skeletons</text>
        </view>
    </view>

   <skeletons is_capture_nodes={{is_capture_nodes}} is_complete="{{is_complete}}" loading="music" block_animation="shine" selector="skeletons"
   background="#fff" />
    /**
        index.wxml include skeletons file offset
    **/

    {
        "usingComponents":{
            "skeletons":"/components/skeletons/index"
        }
    }
    /** index.js operating props value change **/

    wx.request({
        url:'/Titan_star',
        success:()=>{
            this.setData({
                is_capture_nodes:true //抓取节点绘制
            },()=>{

                /** 
                 *  绘制节点后,可能你会做些喜欢的事...
                 *  下面保留了另外的控制器,关闭骨架屏
                 *  让我们的代码,更加随心自由
                 *  **/

                this.setData({
                    is_complete:true
                })
            })
        }
    })

contact

“wechat”/

  • 组件的功能还有许多的不足可以优化,也欢迎小伙伴有更好的建议issues提交

License

MIT

发送邮箱

Copyright (c) 2018-present, Shiwen (Titan_star) Lai

About

小程序骨架屏动态注入组件

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published