uniappで動かない写真の効果を実現する方法

モバイル アプリケーション開発において、写真はアプリケーションの美しさを高め、ユーザー エクスペリエンスを向上させることができるため、非常に重要な要素です。ただし、ユーザーがスワイプしても画像が移動せず、特定の位置に留まりたい場合があります。これは、ページの下部に 4 つの固定ボタンを配置したり、ページの上部にナビゲーション バーを配置して、ユーザーがスクロールしてもページの上部に留まるようにするなど、多くの状況で非常に役立ちます。この記事では、uniappで動かない写真の効果を実現する方法を紹介します。

1. CSS 位置決めを使用する

動かない画像を実現する 1 つの方法は、CSS の位​​置決め属性を使用して画像を制御することです。具体的には、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 ピクセルに設定し、その位置プロパティを相対に設定します。次に、CSS クラス名「fixed-img」を画像に追加し、そのposition プロパティをfixedに設定し、ブラウザ ウィンドウを基準にして画像を配置するために、top プロパティと left プロパティも設定しました。ページがスクロールしても、画像はブラウザ ウィンドウに対する相対的な位置を維持するため、同じ位置に固定されているように見えます。

2. uni-ui コンポーネントを使用する

uniapp で uni-ui コンポーネントを使用する場合、動かない画像の効果を簡単に実現できるコンポーネントがあります。それは uni です。 - スティッキー コンポーネント。このコンポーネントは、コンテナの上部または下部に任意のコンテンツを固定できます。コンテンツを配置するためのスロットのみが必要で、プロパティを設定することでコンテンツの位置と状態を制御します。

これは、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 属性を使用して、コンテナの上部から 100 ピクセルの画像を固定します。したがって、ページがスクロールしても、画像はコンテナの上部 100 ピクセルを基準とした位置に留まります。

3. 概要

CSS の配置と uni-ui コンポーネントを使用すると、uniapp で画像を動かさない効果を簡単に実現できます。これにより、アプリの美しさが向上するだけでなく、特に長いページで使用する場合のユーザー エクスペリエンスも向上します。これらの方法は単純ですが、アプリケーションに多大な価値をもたらします。

以上がuniappで動かない写真の効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。