taro小程序添加骨架屏的实现代码


Posted in Javascript onNovember 15, 2019

最近做了一些小程序方面的性能优化,如分包加载,添加骨架屏等,这次主要说一下骨架屏的相关内容。

关于骨架屏,有三种方法:

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假数据可能和实际渲染出来的页面差距较大,例如瀑布流~

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
Js callBack 返回前一页的js方法
Nov 30 Javascript
javascript入门基础之私有变量
Feb 23 Javascript
js控制不同的时间段显示不同的css样式的实例代码
Nov 04 Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
js鼠标点击图片切换效果实现代码
Nov 19 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
Apr 21 Javascript
原生js简单实现放大镜特效
May 16 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
微信小程序实现上传图片功能
May 28 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 #Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 #Javascript
JavaScript定时器常见用法实例分析
Nov 15 #Javascript
解决Layui 表格自适应高度的问题
Nov 15 #Javascript
layui前端时间戳转化实例
Nov 15 #Javascript
JavaScript变量基本使用方法实例分析
Nov 15 #Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 #Javascript
You might like
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
解析php中static,const与define的使用区别
2013/06/18 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
用Jquery重写windows.alert方法实现思路
2013/04/03 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
python文件和目录操作方法大全(含实例)
2014/03/12 Python
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python如何给你的程序做性能测试
2020/07/29 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
医学实习生自我鉴定
2013/12/12 职场文书
护士的自我鉴定
2014/02/07 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
影视后期实训报告
2014/11/05 职场文书
python中如何对多变量连续赋值
2021/06/03 Python