搬砖小记：一个简单的加载中效果

Author Avatar
EmptinessBoy 4月 26, 2021
  • 在其它设备中阅读本文章

这是一个使用绝对定位实现的完美居中。

今天下午没事，就去了波公司转转，顺便帮学长打打杂，修修BUG🤔。其中我的任务之一就是为抽奖页面做一个加载遮罩。

场景

横屏

在公司的项目中，有一个模仿王者荣耀的横屏抽奖页面。

image-20210425231419737

这是一个采用 uniapp 混合开发的 APP，然鹅，似乎 uniapp 开发的 app 在进行横竖屏强制切换的时候，会出现 font-size 莫名奇妙变大的问题。

为了避免因为强制页面横屏造成的文字突然变大的问题，所以我们在抽奖页面载入时添加了定时器，在页面开始载入后 500 毫秒进行横屏的旋转。

onLoad: function() {
    // 延时 500ms 进行旋转
    setTimeout(() => {
        plus.screen.lockOrientation('landscape-primary'); 
    }, 500)
}

这样一番设置后，页面显示确实没有啥明显的问题，但是先显示竖屏，再转为横屏的效果让人看起来不是特别舒服。（大概是下面这样

动画2

遮罩

为了缓和页面载入后再旋转导致的奇怪显示效果，我决定在横屏载入前使用一个遮罩进行遮挡。这一步的优化非常简单，直接使用了 uView 中的 u-mask组件进行了遮挡：

<u-mask :show="maskShow" :custom-style="{background: '##191C3F'}">
    <view style="width: 100%; height: 100%; display: flex; justify-content: center;align-items: center;">
        <image style="width: 100rpx; height: 100rpx;" mode="aspectFit"></image>
    </view>
</u-mask>

上面的代码中我使用了 u-mask 组件，并向组件中放置了插槽。插槽中的容器通过 flex 布局，实现了中间嵌入的 image 组件水平和垂直居中。

然后在页面载入时显示带有加载动图的遮罩，等待页面旋转完毕后，取消遮罩显示。

onLoad: function() {
    setTimeout(() => {
        plus.screen.lockOrientation('landscape-primary');
        setTimeout(() => {
            this.maskShow = false
        }, 1000)
    }, 500)
}

这种方法确实可以达到我想要的预期效果，可是在部分配置较低的手机上，就会出现旋转已经完成，但动图还没加载出来的情况。

优化

综合分析了一波，感觉可能是 flex 布局的渲染较慢的缘故，为了加快响应速度，于是这里就弃用 flex 布局采用了 absolute 绝对定位的方式，来使遮罩内容更快的进行加载。

<u-mask :show="maskShow" :custom-style="{background: '##191C3F'}">
    <image style="position: absolute;left: 50%; top:50%;transform: translate(-50%,-50%); width: 100rpx; height 100rpx;" mode="aspectFit" src="/static/imgs/loading.gif">
    </image>
</u-mask>

在这一步优化完成后，可以看到页面旋转的过程已经被遮罩和加载动画进行了遮挡，相比之前有着更好的用户体验。

动画1

思考

绝对定位的完美居中

我们都知道，使用 flex 布局可以很简单的实现一个完美的居中效果。（如果你还不会，可以看看我的上一篇文章 链接）。

那么使用 absolute/fixed 绝对定位是不是也能一样简单的做一个完美居中呢？答案是可以的。

栗子

这里我们先使用 html 建一个简单的 div。给 body 和 div 设置不同的背景颜色。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>fixed布局完美居中</title>
    <style type="text/css">
        body {
            background-color: aqua;
        }
        body>div {
            width: 300px;
            height: 150px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

image-20210426103039358

现在，我们给 div 加上绝对定位布局，并且设置了 left:50%; top:50%

body>div {
    width: 300px;
    height: 150px;
    background-color: blueviolet;
    position: absolute;
    left: 50%;
    top: 50%;
}

image-20210426103959426

咦？说好的居中呢？怎么跑到右下角去了？

其实，这里我们使用 left 和 top 属性，更改的是 div 左上角的位置，我们可以看到 div 盒子的左上角已经处于当前 body 的中间了。那么如何让我们的整个 div 居中呢？

其实很简单，我们只要让 div 向左上角偏移 1/2 自身的宽度就可以了。而 CSS 中，我们可以使用 transform 来进行位置偏移：

transform: translate(-50%,-50%);

加上这一行代码后，我们再刷新页面，可以看到 div 盒子已经使用绝对定位固定在页面中间了！

image-20210426104828419

完整代码

是不是用绝对定位来写居中也很方便呢？在实际开发中，并不是说我们一定要使用较新的 flex 布局去取代传统的浮动定位或绝对定位，而是要根据项目的需要和实际运行效果来决定我们的布局方式。

篇幅限制，完整示例代码请公众号后台回复 ”绝对居中“ 来获取。

尾图4

This blog is under a CC BY-NC-ND 4.0 Unported License
本文链接：https://coding.emptinessboy.com/2021/04/%E6%90%AC%E7%A0%96%E5%B0%8F%E8%AE%B0%EF%BC%9A%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%8A%A0%E8%BD%BD%E4%B8%AD%E6%95%88%E6%9E%9C/