How to realize sliding up and hiding navigation effect in uniapp

In mobile APP design, the navigation bar is a very important element. It allows users to quickly locate the information they need, and is also an important visual element of an APP. However, during the design process, we not only need to consider the style and layout of the navigation bar, but also pay attention to its performance and interaction effects in different scenarios.

It is relatively easy to achieve the effect of sliding down and hiding navigation in uniapp. We only need to use some simple styles and JS code to achieve it.

First, add a container to the navigation area of ​​the page, set its position attribute to fixed, and its z-index attribute to a higher value so that it is always at the top of the page. In order to hide the navigation after sliding down, we can use the transform attribute to move the navigation bar out of the visible range of the screen.

The specific implementation steps are as follows:

1. Add a navigation container named header, and add the style and layout of the navigation in it.
2. Set the initial position of the navigation container to the top of the screen.
3. Use JS to listen to screen scroll events. When the user slides down, the navigation container moves out of the visible range of the screen. Conversely, when the user swipes up, the navigation container returns to the top of the screen.

The specific code implementation is as follows:

// html文件代码
<template>
  <div class="wrapper">
    <header>
      <!--导航内容-->
    </header>
    <!--主要内容区域-->
  </div>
</template>

<style>
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    z-index: 999;
    transition: all .3s ease-in-out; // 添加过渡效果
  }
  
  header.hide {
    transform: translateY(-100%);
  }
</style>

<script>
  export default {
    data() {
      return {
        lastScrollTop: 0,
        isHeaderShow: true
      }
    },
    mounted() {
      window.addEventListener('scroll', this.onScroll)
    },
    destroyed() {
      window.removeEventListener('scroll', this.onScroll)
    },
    methods: {
      onScroll(e) {
        const currentScrollTop = document.documentElement.scrollTop
        if (currentScrollTop > 0 && currentScrollTop > this.lastScrollTop) {
          this.isHeaderShow = false
        } else {
          this.isHeaderShow = true
        }
        this.lastScrollTop = currentScrollTop
      }
    },
    computed: {
      headerClass() {
        return {
          hide: !this.isHeaderShow
        }
      }
    }
  }
</script>

In the above code, we use the isHeaderShow variable to mark whether the current navigation bar should be displayed, and use computed properties to bind the navigation container Style, and add a scroll event listener in the JS method to control whether the navigation bar is displayed or not.

It should be noted that in order for the navigation bar to operate correctly, we need to set the height of the navigation container and ensure that there is sufficient spacing at the head of the main content area, otherwise the navigation bar will overlap the content area. Condition.

In short, by setting the position to fixed, adding transition effects and transform attributes to the navigation container, and then controlling the movement of the navigation container through scroll event listening, we can very simply achieve the effect of sliding down to hide the navigation in uniapp.

The above is the detailed content of How to realize sliding up and hiding navigation effect in uniapp. For more information, please follow other related articles on the PHP Chinese website!