How to fix the head without scrolling in uniapp

With the popularization of mobile Internet, the demand for mobile applications is increasing, and the cost and threshold of developing mobile applications have also been reduced. Among them, uniapp is a popular cross-platform application framework. Its characteristic is that it unifies the development of small programs, H5, Android and ios platforms, allowing developers to develop mobile applications more efficiently.

During the uniapp application development process, fixing the head and not scrolling is a very common requirement. For example, in a list page, when the user slides, he does not want the title bar of the head to slide with it, but to remain fixed. The method to achieve this requirement is also very simple. I will introduce two methods to you below.

Method 1: Use uni-app component

uni-app provides us with a very easy-to-use component vue-sticky. Using this component, we can easily achieve the effect of fixing the head without scrolling. .

First, introduce the vue-sticky component on the page that needs to fix the header:

<template>
  <div>
    <vue-sticky>
      <your header content>
      // 此处是头部内容
    </vue-sticky>
    <your page content>
    // 此处是页面内容
  </div>
</template>

<script>
  import VueSticky from "@/components/vue-sticky/vue-sticky";
  export default {
    components: { VueSticky },
    data() {}
  };
</script>

Then, you need to define the following attributes in the vue-sticky component:

• offset-top: Indicates the distance that needs to be fixed, that is, where to slide to start fixing the head. Default is 0.
• offset-bottom: Indicates the distance at which the scroll bar needs to appear. That is, after the page scrolls to the bottom, if there is still so much distance, this event will be triggered. Default is 0.
• scroll-target: Represents a scrolling container that requires a fixed head. It is actually implemented using better-scroll. If this property is not passed, it will be bound to the window object by default.

Next, you can happily achieve a fixed head without scrolling.

Method 2: Use CSS properties

If you don’t want to use the vue-sticky component to achieve the effect of fixing the head without scrolling, you can also choose to use CSS properties to achieve this requirement.

First, define a class on the page where the header needs to be fixed, such as .fixed-nav:

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

Then, bind a method to listen for scroll events on the list page and determine the scrolling Whether the distance exceeds a certain distance:

<template>
  <div ref="scrollBox" @scroll="handleScroll">
    <div class="nav fixed-nav">
      // 头部内容
    </div>
    <ul>
      // 列表内容
    </ul>
  </div>
</template>

<script>
  export default {
    data() {},
    methods: {
      handleScroll() {
        const scrollTop = this.$refs.scrollBox.scrollTop;
        if (scrollTop > 100) {
          this.$refs.nav.classList.add("fixed-nav");
        } else {
          this.$refs.nav.classList.remove("fixed-nav");
        }
      }
    }
  };
</script>

Among them, this.$refs.scrollBox represents the container bound to the scroll event, and this.$refs.nav represents the header content that needs to be fixed.

The above are two methods to achieve a fixed head without scrolling. Developers can choose the most suitable method according to their own needs. In general, the development of the uniapp framework is very convenient and fast, and the official provides a wealth of components and interfaces. Everyone can give full play to their creativity and develop better mobile applications.

The above is the detailed content of How to fix the head without scrolling in uniapp. For more information, please follow other related articles on the PHP Chinese website!