So erzielen Sie den Effekt von unbeweglichen Bildern in Uniapp

Bei der Entwicklung mobiler Anwendungen sind Bilder ein sehr wichtiges Element, da sie die Schönheit der Anwendung steigern und das Benutzererlebnis verbessern können. Manchmal möchten wir jedoch, dass das Bild an einer bestimmten Position bleibt und sich nicht bewegt, wenn der Benutzer wischt. Dies ist in vielen Situationen sehr nützlich, beispielsweise beim Platzieren von vier festen Schaltflächen am unteren Rand der Seite oder beim Platzieren einer Navigationsleiste am oberen Rand der Seite, sodass diese beim Scrollen des Benutzers oben auf der Seite bleibt. In diesem Artikel erfahren Sie, wie Sie den Effekt unbeweglicher Bilder in Uniapp erzielen.

1. CSS-Positionierung verwenden

Eine Möglichkeit, das Bild unbeweglich zu machen, besteht darin, das Positionierungsattribut in CSS zu verwenden, um es zu steuern. Konkret können wir das Attribut position: Fixed verwenden, um das Bild auf der Seite zu fixieren. Diese Eigenschaft löst das Bild vom Dokumentenfluss und positioniert es relativ zum Browserfenster. Selbst wenn die Seite gescrollt wird, bleibt das Bild an derselben Position. position: fixed属性将图像固定在页面上。此属性将图像从文档流中脱离出来，并相对于浏览器窗口进行定位。因此，即使页面发生滚动，图像仍将停留在相同的位置。

下面是一个实现这种效果的示例代码：

<template>
  <div class="container">
    <img class="fixed-img" src="/static/image/logo.png">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</template>

<style>
  .container {
    height: 2000px;
    position: relative;
  }
  .fixed-img {
    position: fixed;
    top: 20px;
    left: 20px;
  }
</style>

在该示例中，我们将容器的高度设置为2000像素，并将其position属性设置为相对。然后我们为图像添加了一个CSS类名"fixed-img"，并设置其position属性为fixed，另外还设置了其top和left属性，将其相对于浏览器窗口进行定位。在页面滚动的过程中，图像将保持相对于浏览器窗口的位置，因此看起来它是固定在相同的位置。

二、使用uni-ui组件

如果你的uniapp中使用了uni-ui组件，有一个组件可以轻松实现图像不动的效果，它就是uni-sticky组件。该组件可以将任何内容固定在容器的顶部或底部。它只需要一个插槽来放置内容，并通过设置属性来控制内容的位置和状态。

下面是一个使用uni-sticky组件的示例：

<template>
  <div class="container">
    <uni-sticky :offset-top="100">
      <img src="/static/image/logo.png">
    </uni-sticky>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</template>

<script>
  import uniSticky from '@/components/uni-sticky/uni-sticky.vue'
  export default {
    components: {
      uniSticky
    }
  }
</script>

<style>
  .container {
    height: 2000px;
  }
</style>

在该示例中，我们引入了uni-sticky组件，并将其包裹在一个图片上。我们通过offset-top

Hier ist ein Beispielcode, um diesen Effekt zu erzielen:

rrreee

In diesem Beispiel legen wir die Höhe des Containers auf 2000 Pixel fest und setzen seine Positionseigenschaft auf relativ. Dann haben wir dem Bild einen CSS-Klassennamen „fixed-img“ hinzugefügt und seine Positionseigenschaft auf „fixed“ gesetzt. Außerdem haben wir seine oberen und linken Eigenschaften festgelegt, um es relativ zum Browserfenster zu positionieren. Beim Scrollen der Seite behält das Bild seine Position relativ zum Browserfenster bei, sodass es den Anschein hat, als ob es an derselben Position fixiert wäre.

2. Verwenden Sie Uni-UI-Komponenten🎜🎜Wenn Sie Uni-UI-Komponenten in Ihrer Uniapp verwenden, gibt es eine Komponente, die leicht den Effekt von unbeweglichen Bildern erzielen kann, nämlich die uni-sticky-Komponente . Diese Komponente kann beliebige Inhalte oben oder unten im Container anheften. Es ist lediglich ein Slot erforderlich, um Inhalte zu platzieren und die Position und den Status des Inhalts durch Festlegen von Eigenschaften zu steuern. 🎜🎜Hier ist ein Beispiel für die Verwendung der uni-sticky-Komponente: 🎜rrreee🎜In diesem Beispiel stellen wir die uni-sticky-Komponente vor und packen sie in ein übergeordnetes Bild ein. Wir verwenden das Attribut offset-top, um das Bild 100 Pixel vom oberen Rand des Containers entfernt zu fixieren. Wenn also die Seite gescrollt wird, bleibt das Bild relativ zu den oberen 100 Pixeln des Containers positioniert. 🎜🎜3. Zusammenfassung🎜🎜Durch die Verwendung von CSS-Positionierung und Uni-UI-Komponenten können wir leicht den Effekt erzielen, dass Bilder in Uniapp still bleiben. Dies verbessert nicht nur die Ästhetik der App, sondern steigert auch das Benutzererlebnis, insbesondere bei der Verwendung auf langen Seiten. Obwohl diese Methoden einfach sind, können sie Ihrer Anwendung einen enormen Mehrwert verleihen. 🎜

Das obige ist der detaillierte Inhalt vonSo erzielen Sie den Effekt von unbeweglichen Bildern in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!