taro小程序添加骨架屏

二向箔
• 阅读 5366

最近做了一些小程序方面的性能优化,如分包加载,添加骨架屏等,这次主要说一下骨架屏的相关内容。
关于骨架屏,有三种方法:
1.直接请UI同学帮忙P张图,当做loading图放上去。这种方法简单粗暴,但是需要请人帮忙~
2.根据每个页面,自己写一套相同的代码来覆盖样式。这种方法的工程量,你懂的~
3.能不能写个组件呢?该组件自动获取元素位置大小信息来渲染,数据返回后将其卸载。

下面主要说第三种方法~
主框架采用taro,一套代码兼容多端,但是今天这个代码,需要考虑兼容性~
根据上面的思路,我们首先要找到骨架屏的容器,然后找到需要P成灰色的元素,获取该元素的位置大小信息,最后就是渲染了~
获取元素,taro提供了API,Taro.createSelectorQuery()。通过这个API返回一个SelectorQuery对象实例,然后再通过selectAll()来查找骨架中带有特定类的class名,查找之后通过boundingClientRect()获取元素的位置大小信息,把这些信息存放在数组中。
我这边写了两个类,一个是skeleton-radius,渲染圆形;一个是skeleton-rect,渲染长方形。后续大家可以自行扩展。
文字有点多,大家可能看着有点云里雾里的,下面上代码~

    // 百度小程序目前不支持跨自定义组件的后代选择器: >>>
    // 但是H5使用后代选择器(.the-ancestor .the-descendant)的时候,可以自动识别自定义组件内的后代
    // 微信小程序支持跨自定义组件都后代选择器(.the-ancestor >>> .the-descendant),可修改为如`.${this.props.selector} >>> .${this.props.selector}-radius`
    if (process.env.TARO_ENV === 'weapp') {
        Taro.createSelectorQuery().selectAll(`.${this.props.selector} >>> .${this.props.selector}-radius`)
            .boundingClientRect().exec(rect => {
                that.setState({
                    radiusList: rect[0]
                });
            });
    }
    else {
        Taro.createSelectorQuery().selectAll(`.${this.props.selector} .${this.props.selector}-radius`)
        .boundingClientRect().exec(rect => {
            that.setState({
                radiusList: rect[0]
            });
        });
    }

大家也看到上面的注释了,如果要在多端运行,可先判断环境,根据环境使用不同的选择器。上面代码是实现一个圆形的灰色区域~大家如果有多个形状的需求的话,可以简单封装一个函数,这里我就不再细说了,具体的可以到Demo详细查看~
细说一下后代选择器的兼容性问题:

  1. 百度小程序目前不支持跨自定义组件的后代选择器: >>>。
  2. 但是H5使用后代选择器(.the-ancestor .the-descendant)的时候,可以自动识别自定义组件内的后代。使用自定义组件时,外层是否有元素包裹,都可识别到自定义组件内部的指定类选择器。
  3. 微信小程序支持跨自定义组件的后代选择器(.the-ancestor >>> .the-descendant),但使用自定义组件时,外层不能嵌套元素,否则无法识别。

接下来就是渲染了,这个比较简单,直接上代码~这里背景色和将要P成条状等的元素的背景色都可以在使用组件时自定义传入,也可以不传,有默认色~

  <View className='skeleton-container' style={{background: `${bgColor}`}}>
            {
                radiusList.map(radiusItem => (
                    <View className='skeleton-item skeleton-item-radius' style={{width: `${radiusItem.width}PX`, height: `${radiusItem.height}PX`,
                        background: `${itemColor}`, top: `${radiusItem.top}PX`, left: `${radiusItem.left}PX`}}
                    />
                ))
            }
            {
                rectList.map(rectItem => (
                    <View className='skeleton-item' style={{width: `${rectItem.width}PX`, height: `${rectItem.height}PX`,
                        background: `${itemColor}`, top: `${rectItem.top}PX`, left: `${rectItem.left}PX`}}
                    />
                ))
            }
        </View>

到这里,组件已经完成了,使用的时候可以直接引入组件,然后传入selector就可以了,注意,由于数据是动态获取的,页面开始为空,这里就需要mock一些假数据来填充页面了~要覆盖的元素类名必须和组件中的图形类保持一致~

   <View className='container' style={{fontSize: '20PX'}}>
            {
                showSkeleton && <Skeleton
                    selector='skeleton'
                    bgColor='pink'
                    itemColor='skyblue'
                />
            }
            <View className='skeleton'>
                <View className='userInfo'>
                    <Image
                        src={userInfo.avatarUrl}
                        alt='用户头像'
                        className='userInfo-avatar skeleton-radius'
                    />
                    <Text>{userInfo.nickName}</Text>
                </View>
                <View>
                    {
                        list.map(item => (
                            <View className='skeleton-rect' style={{marginBottom: '30PX'}}>{item}</View>
                        ))
                    }
                </View>
                {/* 自定义组件外层最好没有元素包裹,否则微信小程序无法识别,但是H5可以识别 */}
                <List />
            </View>
        </View>

看到注释了吗?使用自定义组件时一定要注意噢~自定义组件若被元素包裹,微信小程序无法识别到自定义组件内的图形类!!!

最后要说一下适合使用骨架屏的场景:页面结构简单,元素的宽高固定~若元素宽高不固定的话,你写的mock假数据可能和实际渲染出来的页面差距较大,例如瀑布流~

好了,这次的一些收获就到这里了~大家如果有更好的方法,可以留言交流~最后,附上完整的代码地址~

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
3年前
Taro小程序自定义顶部导航栏
微信自带的顶部导航栏是无法支持自定义icon和增加元素的,在开发小程序的时候自带的根本满足不了需求,分享一个封装好的组件,支持自定义icon、扩展dom,适配安卓、ios、h5,全面屏。我用的是京东的Taro多端编译框架写的小程序,原生的也可以适用,用到的微信/taro的api做调整就行,实现效果如下。!在这里插入图片描述(https://i
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
Unity横屏
Android下发现Unity里面的Player设置,并不能完全有效,比如打开了自动旋转,启动的时候还是会横屏,修改XML添加以下代码<applicationandroid:icon"@drawable/ic\_launcher"                    android:label"@string/app\_name"
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Stella981 Stella981
3年前
Chrome扩展程序一键生成网页骨架屏
对于依赖接口渲染的页面,在拿到数据之前页面往往是空白的,为了提示用户当前正在加载中,往往会使用进度条、loading图标或骨架屏的方式。对于前两种方案而言,实现比较简单;本文主要研究骨架屏的应用及实现,并给出一种使用Chrome扩展工具快速生成骨架屏的方案。首先看看效果先放一个动图展示!(https://oscimg.oschina
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
二向箔
二向箔
Lv1
晨起动征铎,客行悲故乡。
文章
3
粉丝
0
获赞
0