css实现简单骨架屏skeleton；可用于App,小程序,uniapp#yyds干货盘点#

Posted 2022-02-12 前端老实人

 骨架屏就是页面初加载数据没显示出来之前显示的一个页面，展示页面渲染好之后再隐藏骨架屏，相当于一个加载页面

我是用uniapp写的，小程序，APP，Vue页面同理：

有个简单的结构就可以

<template>
    <view class="list">
        <view class="lbt" v-if="lbt">
        </view>
        <view class="flex-s" v-if="klist">
            <view class="kapian" v-for=" i in 4">
            </view>
        </view>
        <view class="lists" v-for=" i in 4">
        </view>
    </view>
</template>

这里会用到一个css的函数

linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

值	描述
direction	用角度值指定渐变的方向（或多少度）。默认从上到下，to属性是从左到右；
color-stop1, color-stop2,...	用于指定渐变的起止颜色。

<style lang="scss">
.lists 
            background: #eee;                /*从多少度开始，到25%是#eee,37%是#fff*/
            background-image: linear-gradient(90deg, #eee 25%, #fff 37%, #eee 63%);
            width: 100%;
            height: 0.6rem;
            list-style: none;
            background-size: 400% 100%;
            background-position: 100% 50%;
            animation: skeleton-loading 0.8s infinite; /*infinite规定动画播放无限次*/
                @keyframes loading             /*右下角 中间*/
                  0%     background-position: 100% 50%;
                                               /*左上角 中间*/
                  100%     background-position: 0 50%;
                  

                
        

</style>

background-position属性设置背景图像的起始位置。

值	描述
left top left center left bottom right top right center right bottom center top center center center bottom	如果仅指定一个关键字，其他值将会是"center"
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％。右下角是100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

​

这是效果图 

最后

如果对您有帮助，希望能给个