微信小程序电商实战-骨架屏实现

来源:http://www.chinese-glasses.com 作者:Web前端 人气:51 发布时间:2020-04-22
摘要:html部分 首先我们需要引入skeleton组件到页面中,并且在页面根元素上加上.skeleton样式 通过after伪元素生成骨架样式,并通过absolute覆盖到实际元素上 首页效果演示.gif after伪元素无法插

html部分

首先我们需要引入skeleton组件到页面中,并且在页面根元素上加上.skeleton样式

通过after伪元素生成骨架样式,并通过absolute覆盖到实际元素上

图片 1首页效果演示.gif

after伪元素无法插入到inputimg等非容器元素中,所以如果需要添加skleton,则需要再加一层元素将其包裹

我们来看一下关键代码,如何获取骨架节点

实现css部分(scss写法)

工作忙碌,难得有时间继续开发研究这个项目,目前完成了,基础设施开发及首页得开发,话不多说,老规矩,先来看下效果吧

js部分

为了能看到骨架屏的渲染,我调慢了所有接口的响应速度,因此演示响应较慢

优点简单,不需要工程,不用puppeteer生成骨架dom,也不需要二次开发维护定制程度高,想怎么搞就怎么搞不臃肿,只给你想要的缺点自动化程度低,需要在骨架dom上手动添加类协同要求高,不像工程化能通过工程去约束思路

这是根据页面布局自动生成得骨架屏,目前非常流行的一种提升体验的办法

只需要在你认为合理的骨架粒度元素上添加skeleton类即可

然后在对应元素中加入不同的样式类,绘制骨架

控制好skt-loading类的切换

获取到了相关节点信息,比如width,height,top,left等信息后,便可以利用绝对定位或者fixed绘制骨架了

通过伪元素实现骨架样式,通过操作样式实现骨架和页面的动态切换

<View className={classNames(styles.home, 'skeleton')}> {initialize && <ComponentCommonSkeleton />}</View>

原文:

<View className={classNames(styles.hotsale, 'skeleton-light')}> <View className={styles.header}> <View className={classNames(styles.title, 'skeleton-square')}> 今日热卖 </View> <View className={classNames(styles.tip, 'skeleton-square')}> 每日推荐,超值抢购 </View> </View></View>

使用注意

完整的实现逻辑,由于代码较多,不与全部给出,有兴趣的直接去仓库吧skeleton源码

本文由10bet发布于Web前端,转载请注明出处:微信小程序电商实战-骨架屏实现

关键词:

最火资讯