小程式骨架屏動態注入元件

laishiwen發表於2018-12-05
元件

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

“wechat”/
  • 元件的功能還有許多的不足可以優化，也歡迎小夥伴有更好的建議issues提交
  • 如果你覺得不錯，前往我的github，點個star好評

License

MIT

傳送郵箱

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

相關文章