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 相关文章推荐
Js中sort()方法的用法
Nov 04 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
May 17 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
非常实用的js验证框架实现源码 附原理方法
Jun 08 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
vue data对象重新赋值无效(未更改)的解决方式
Jul 24 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
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
PHP中header用法小结
2016/05/23 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
jQuery Easyui 验证两次密码输入是否相等
2016/05/13 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
很酷的星级评分系统原生JS实现
2016/08/25 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
解决element UI 自定义传参的问题
2018/08/22 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
Python批量修改文件后缀的方法
2014/01/26 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
Python 从attribute到property详解
2020/03/05 Python
django 连接数据库出现1045错误的解决方式
2020/05/14 Python
eDreams巴西:廉价机票,酒店优惠和度假套餐
2017/04/14 全球购物
巴西在线鞋店:Shoestock
2017/10/28 全球购物
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
党校自我鉴定范文
2013/10/02 职场文书
制定岗位职责的原则
2013/11/08 职场文书
学生自我鉴定模板
2013/12/30 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
增员口号大全
2014/06/18 职场文书
开展党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
介绍信怎么写
2015/01/30 职场文书
Laravel中获取IP的真实地理位置
2021/04/01 PHP
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server
MySQL 自动填充 create_time 和 update_time
2022/05/20 MySQL
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL