当前位置：首页 > news >正文

Uniapp 中布局魔法：display 属性

news 来源：原创 2025/5/23 14:17:45

一、开启 Uniapp 布局魔法之旅

各位 Uniapp 开发的小伙伴们，欢迎来到 Uniapp 这个充满创意和挑战的魔法世界！在构建跨平台应用时，页面布局就像是搭建一座梦幻城堡，而 display 属性则是我们手中的神奇魔杖，能让元素们按照我们的心意排列组合。今天，就让我们一起揭开 display 属性的神秘面纱，看看它在 Uniapp 中能施展哪些魔法。

二、块级元素与 `display: block`—— 霸道的 “占地王”

1. 块级元素的 “霸道” 本性

在 Uniapp 的页面舞台上，块级元素就像是一群霸道的 “占地王”。它们总是喜欢独自占据一行，而且会尽可能地向左右两边伸展，把可用的宽度都占满。像 <view> 这种在 Uniapp 里常用的元素，默认就是块级元素。你可以把它想象成舞台上一个个独自站在一排的大明星，气场十足！

2. `display: block` 施展魔法

当你给一个元素设置 display: block 时，就像是给它下达了 “占地为王” 的指令。它会立刻从新的一行开始，把宽度撑得满满的。咱们来看看下面这个例子：

<template>
  <view>
    <text style="display: block; background-color: lightblue;">我原本可能不是块级元素，但现在我要霸占一行啦！</text>
    <text style="display: block; background-color: lightblue;">我也来霸占一行咯！</text>
  </view>
</template>

<style>
  /* 这里可以添加一些全局样式，不过在这个例子里暂不需要 */
</style>

在这个 Uniapp 的代码片段中，<text> 元素本来可能没有这么 “霸道”，但通过 display: block，它们就像被施了魔法一样，各自独占一行，在页面上 “威风凛凛”。

三、行内元素与 `display: inline`—— 友好的 “手拉手伙伴”

1. 行内元素的友好特性

行内元素就像是一群友好的小伙伴，它们不喜欢独自霸占一行，而是喜欢手拉手地站在一起。它们会和其他行内元素紧紧挨着，宽度也只会根据自身内容的多少来决定。在 Uniapp 里，像 <text> 标签很多时候就表现得像行内元素。

2. `display: inline` 的奇妙效果

当你给一个元素设置 display: inline 时，它就会乖乖地和其他行内元素站成一排，就像小伙伴们手拉手一样和谐。看下面这个例子：

<template>
  <view>
    <view style="display: inline; background-color: lightgreen;">我原本可能是块级元素，现在要和大家手拉手啦！</view>
    <view style="display: inline; background-color: lightgreen;">我也来加入手拉手队伍咯！</view>
  </view>
</template>

<style>
  /* 同样，这里暂时不需要额外的全局样式 */
</style>

这里的 <view> 元素本来可能是 “占地王”，但通过 display: inline，它们就像变成了友好的小伙伴，并排显示在页面上。

四、行内块元素与 `display: inline - block`—— 全能的 “跨界小能手”

1. 行内块元素的独特魅力

行内块元素就像是一群全能的 “跨界小能手”，它们结合了块级元素和行内元素的优点。既可以和其他元素并排显示，又能拥有自己独立的宽度和高度，就像一群既能手拉手站在一起，又各自有自己小房间的小伙伴。

2. `display: inline - block` 的精彩表现

<template>
  <view>
    <view style="display: inline - block; width: 100px; height: 100px; background-color: lightcoral; margin: 10px;">我是行内块元素</view>
    <view style="display: inline - block; width: 100px; height: 100px; background-color: lightcoral; margin: 10px;">我也是行内块元素</view>
  </view>
</template>

<style>
  /* 暂时无需额外全局样式 */
</style>

在这个 Uniapp 示例中，<view> 元素通过 display: inline - block 变成了行内块元素。它们可以并排站在一起，而且每个元素都有自己设定好的宽度和高度，是不是很厉害？

五、`display: none` 与元素隐身术 —— 消失的 “神秘嘉宾”

1. 神奇的隐身魔法

display: none 就像是一个超级神秘的隐身术。当你给一个元素设置 display: none 时，这个元素就会像变魔术一样从页面上彻底消失，而且它不会占据任何空间，就好像从来没有在这个舞台上出现过一样。

2. 在 Uniapp 中的实际应用

<template>
  <view>
    <button @click="showHiddenDiv">显示元素</button>
    <view id="hiddenDiv" style="display: none; background-color: lightyellow;">我原本是隐身的，现在等着被你发现呢！</view>
  </view>
</template>

<script>
export default {
  methods: {
    showHiddenDiv() {
      const hiddenDiv = this.$refs.hiddenDiv;
      if (hiddenDiv) {
        hiddenDiv.style.display = 'block';
      }
    }
  }
};
</script>

<style>
  /* 暂时无需额外全局样式 */
</style>

在这个例子中，<view> 元素一开始就被施了隐身术（display: none）。但是当我们点击按钮时，通过 JavaScript 代码把它的 display 属性改成 block，它就会像神秘嘉宾一样闪亮登场啦！

六、总结

怎么样，小伙伴们？display 属性在 Uniapp 里的魔法是不是超级有趣又实用？通过 display: block、display: inline、display: inline - block 和 display: none 这些神奇的招式，我们可以随心所欲地控制元素在页面上的显示方式，打造出独一无二的跨平台应用页面。从现在起，拿起你手中的 display 魔杖，在 Uniapp 的魔法世界里尽情施展布局魔法吧！