带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(6)

带你读《2022技术人的百宝黑皮书》——短视频无尽流前端开发指南(5) https://developer.aliyun.com/article/1243497?groupCode=taobaotech

底部悬浮loading条

无尽流场景不可避免的是加载loading，对于全屏幕的轮播容器，loading的出现/消失尽量避免产生布局偏移，如果loading过程中用户想去做一些点击操作，但刚好操作的瞬间loading结束了，若此时发生了布局偏移，会造成用户点到非预期的行动点，有损用户体验。可以采用类似此轻量级的悬浮式loading：

.loadingBar {
 &Container {
 position: fixed;
 left: 0;
 bottom: 0;
 z-index: 99;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 width: 100vw;
 height: 5rpx;
 }
 &Item {
 height: 5rpx;
 background-color: #fd0;
 animation: loading 0.6s linear infinite;
 }
}
@keyframes loading {
 0% {
 width: 0;
 opacity: 0;
 }
 30% {
 width: 30vw;
 opacity: 1;
 }
 70% {
 width: 70vw;
 opacity: 1;
 }
 100% {
 width: 100vw;
 opacity: 0;
 }
}

总结

本文通过对短视频无尽流结构的拆解，从各个功能点的角度介绍了如何实现并落地该场景。除了短视频无尽流外，还适用于其衍生场景，如图文卡片无尽流、直播无尽流、3D场景无尽流等等。针对于不同场景，不变的是轮播容器的构建，在此基础上根据不同场景构建单个场景卡片的逻辑即可。

团队介绍

我们是大淘宝-家装家居技术-前端团队，团队支撑大淘宝家居家装业务。旗下包括：每平每屋App、淘宝【极有家】频道。我们连通电商平台和商家店铺，覆盖居家生活、装修设计、线下市场，3D场景化展现居家生活，我们力求让每件单品都不再孤立呈现，置身其中，感受家的优选方案。期待与您一起共筑美好的理想家。