Bagaimana untuk mencapai kesan gambar tidak bergerak dalam uniapp

Dalam pembangunan aplikasi mudah alih, gambar merupakan elemen yang sangat penting kerana ia boleh meningkatkan keindahan aplikasi dan meningkatkan pengalaman pengguna. Walau bagaimanapun, kadangkala kita mahu imej kekal dalam kedudukan tertentu dan tidak bergerak semasa pengguna meleret. Ini sangat berguna dalam banyak situasi, seperti meletakkan empat butang tetap di bahagian bawah halaman, atau meletakkan bar navigasi di bahagian atas halaman supaya ia kekal di bahagian atas halaman semasa pengguna menatal. Artikel ini akan memperkenalkan cara untuk mencapai kesan gambar tidak bergerak dalam uniapp.

1. Gunakan kedudukan CSS

Salah satu cara untuk mencapai imej tak alih adalah dengan menggunakan atribut kedudukan dalam CSS untuk mengawalnya. Khususnya, kita boleh menggunakan atribut position: fixed untuk menyematkan imej pada halaman. Sifat ini memisahkan imej daripada aliran dokumen dan meletakkannya secara relatif kepada tetingkap penyemak imbas. Jadi walaupun halaman itu menatal, imej akan kekal dalam kedudukan yang sama.

Berikut ialah contoh kod untuk mencapai kesan ini:

<template>
  <div>
    <img  class="fixed-img lazy" src="/static/imghwm/default1.png" data-src="/static/image/logo.png" alt="Bagaimana untuk mencapai kesan gambar tidak bergerak dalam uniapp" >
    <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>

Dalam contoh ini, kami menetapkan ketinggian bekas kepada 2000 piksel dan menetapkan sifat kedudukannya kepada relatif. Kemudian kami menambah nama kelas CSS "fixed-img" pada imej dan menetapkan sifat kedudukannya kepada tetap Kami juga menetapkan sifat atas dan kirinya untuk meletakkannya berbanding tetingkap penyemak imbas. Semasa halaman menatal, imej akan mengekalkan kedudukannya berbanding tetingkap penyemak imbas, jadi ia nampaknya dibetulkan dalam kedudukan yang sama.

2. Gunakan komponen uni-ui

Jika anda menggunakan komponen uni-ui dalam uniapp anda, terdapat komponen yang boleh mencapai kesan imej tidak bergerak dengan mudah, ia adalah uni-sticky komponen. Komponen ini boleh menyematkan sebarang kandungan pada bahagian atas atau bawah bekas. Ia hanya memerlukan slot untuk meletakkan kandungan, dan mengawal kedudukan dan keadaan kandungan dengan menetapkan sifat.

Berikut ialah contoh penggunaan komponen uni-sticky:

<template>
  <div>
    <uni-sticky>
      <img  src="/static/imghwm/default1.png" data-src="/static/image/logo.png" class="lazy" alt="Bagaimana untuk mencapai kesan gambar tidak bergerak dalam uniapp" >
    </uni-sticky>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</template>

<script>
  import uniSticky from &#39;@/components/uni-sticky/uni-sticky.vue&#39;
  export default {
    components: {
      uniSticky
    }
  }
</script>

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

Dalam contoh ini, kami memperkenalkan komponen uni-sticky dan membalutnya pada imej. Kami menggunakan atribut offset-top untuk meletakkan imej 100 piksel dari bahagian atas bekas. Jadi apabila halaman menatal, imej akan kekal diposisikan berbanding 100 piksel teratas bekas.

3. Ringkasan

Dengan menggunakan kedudukan CSS dan komponen uni-ui, kita boleh mencapai kesan menjadikan imej kekal dalam uniapp. Ini bukan sahaja meningkatkan estetika apl, tetapi juga meningkatkan pengalaman pengguna, terutamanya apabila digunakan pada halaman yang panjang. Walaupun kaedah ini mudah, ia boleh membawa nilai yang luar biasa kepada aplikasi anda.

Atas ialah kandungan terperinci Bagaimana untuk mencapai kesan gambar tidak bergerak dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!