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

skeletons

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

前往github预览

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 //draw notes
            },()=>{
                this.setData({
                    is_complete:true
                })
            })
        }
    })
复制代码

contact

• 组件的功能还有许多的不足可以优化，也欢迎小伙伴有更好的建议issues提交
• 如果你觉得不错，前往我的github，点个star好评

License

MIT

发送邮箱

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

转载于:https://juejin.im/post/5c077966e51d451de36fdf8c