How to achieve the effect of immobile pictures in uniapp

In mobile application development, pictures are a very important element because they can increase the beauty of the application and improve the user experience. However, sometimes we want the image to stay in a certain position and not move as the user swipes. This is very useful in many situations, such as placing four fixed buttons at the bottom of the page, or placing a navigation bar at the top of the page so that it stays at the top of the page as the user scrolls. This article will introduce how to achieve the effect of immobile pictures in uniapp.

1. Use CSS positioning

One way to achieve immovable images is to use the positioning attribute in CSS to control it. Specifically, we can use the position: fixed property to fix the image to the page. This property detaches the image from the document flow and positions it relative to the browser window. So even if the page scrolls, the image will stay in the same position.

Here is a sample code to achieve this effect:

<template>
  <div>
    <img  class="fixed-img lazy" src="/static/imghwm/default1.png" data-src="/static/image/logo.png" alt="How to achieve the effect of immobile pictures in 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>

In this example, we set the height of the container to 2000 pixels and set its position property to relative. Then we added a CSS class name "fixed-img" to the image and set its position property to fixed. We also set its top and left properties to position it relative to the browser window. As the page scrolls, the image will maintain its position relative to the browser window, so it appears to be fixed in the same position.

2. Use uni-ui components

If you use uni-ui components in your uniapp, there is a component that can easily achieve the effect of immobile images, it is uni- sticky component. This component can pin any content to the top or bottom of the container. It only requires a slot to place content and control the position and state of the content by setting properties.

Here is an example using the uni-sticky component:

<template>
  <div>
    <uni-sticky>
      <img  src="/static/imghwm/default1.png" data-src="/static/image/logo.png" class="lazy" alt="How to achieve the effect of immobile pictures in 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>

In this example, we introduce the uni-sticky component and Wrap it around a picture. We fix the image 100 pixels from the top of the container through the offset-top attribute. So when the page scrolls, the image will remain positioned relative to the top 100 pixels of the container.

3. Summary

By using CSS positioning and uni-ui components, we can easily achieve the effect of making images stay motionless in uniapp. This not only improves the aesthetics of the app, but also enhances the user experience, especially when used on long pages. Although these methods are simple, they can bring tremendous value to your application.

The above is the detailed content of How to achieve the effect of immobile pictures in uniapp. For more information, please follow other related articles on the PHP Chinese website!