skeletons

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

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

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

License

MIT

发送邮箱

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