占位元素 - mp-shadow-element

提供了一种同步某个元素高度用于占位的解决方案，强烈建议在项目中使用，以确保风格一致性。

背景介绍

在项目开发中，还经常遇到这种情况：一个悬浮按钮被固定在页面底部，这可能会遮挡底部的页面内容。

通常我们会采用一种常见的解决方案，就是给下方容器设置一个与悬浮按钮高度相近的下边距，以防遮挡。我承认这确实是行得通，但假如，我是说假如，悬浮按钮的容器的高度是不确定的呢？例如，不同的用户角色或者状态下，显示的内容不一样，那么，阁下会如何应对这种情况呢？

最佳解决方案必然不是根据情况设置不同的下边距，而是直接根据悬浮按钮的高度来设置下边距。但是，获取悬浮按钮的高度和设置下边距通常需要编写大量的代码。因此，我们提供了一个更为便捷的方法。

那就是使用 mp-shadow-element 组件，它可以自动同步与指定元素的高度，作为充当下边距的占位元素。

基本使用

使用方式非常简单，只需在需要创建占位的地方添加以下代码：

<template>
    <view class="list">
        <mp-shadow-element selector=".footer" />
    </view>

    <view class="footer">...<view>
</template>

这里的 selector 是需要与之同步高度的元素的选择器。

相关文档

• mp-shadow-element - 组件