How to use uniapp to develop navigation bar scrolling effect

How to use uniapp to develop navigation bar scrolling effect

In the process of mobile application development, the navigation bar is a very important component. It not only provides the switching function between pages, but also acts as the interface Signage and guidance. Adding a scrolling effect to the navigation bar can further enhance the user experience and make the application more attractive. This article will introduce how to use uniapp to develop navigation bar scrolling effects, and attach relevant code examples.

uniapp is a cross-platform application framework developed based on Vue.js. Through it, applications for small programs, H5, App and other platforms can be developed at the same time. In uniapp, the scrolling effect can be achieved by modifying the style and position of the navigation bar. The following are detailed steps:

Step 1: Create a uniapp project
First, install the uni-app development tools on your computer, and then create a new uniapp project:

$ vue create -p dcloudio/uni-preset-vue my-project

Step 2: Modify the style of the navigation bar
In uniapp, you can modify the style of the navigation bar by modifying the pages.json file. Open the pages.json file, find the page where you want to add a scrolling effect, and then add the following code to it:

"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#F56C6C",
"navigationBarTitleText": "我的页面",
"onReachBottomDistance": 50,
"disableScroll": true

In the above code, navigationBarTextStyle represents the font color of the navigation bar, navigationBarBackgroundColor represents the background color of the navigation bar, and navigationBarTitleText represents The title text of the navigation bar, onReachBottomDistance means that the event is triggered when the scroll reaches 50 pixels from the bottom, and disableScroll means that the scrolling effect of the page is disabled.

Step 3: Listen to the scrolling event of the page
In uniapp, you can achieve the scrolling effect of the navigation bar by listening to the scrolling event of the page. Find the vue file of the page where you want to add a scrolling effect, and add the following code to it:

export default {
    data() {
        return {
            scrollTop: 0
        }
    },
    methods: {
        onPageScroll(event) {
            this.scrollTop = event.scrollTop
        }
    }
}

In the above code, a scrollTop variable is defined in the data method to save the scrolling distance of the page. An onPageScroll method is defined in the methods method to monitor the scrolling event of the page and assign the scrolling distance to the scrollTop variable.

Step 4: Modify the position of the navigation bar
In uniapp, you can achieve the scrolling effect by modifying the position of the navigation bar. Find the vue file of the page where you want to add a scrolling effect, and add the following code to the navigation bar component of the page:

<navigation-bar
    title="我的页面"
    :fixed="scrollTop > 0"
    :style="{ top: scrollTop + 'px' }"
></navigation-bar>

In the above code, title represents the title text of the navigation bar, and the :fixed attribute determines whether scrollTop is greater than 0 To set the fixed position of the navigation bar, the :style attribute modifies the position of the navigation bar by assigning scrollTop to top.

So far, you have successfully developed the navigation bar scrolling effect using uniapp. By modifying the style and position of the navigation bar and listening to page scroll events, you can further optimize the user experience of your application and increase its appeal. Hope this article is helpful to you.

Code example:

pages.json file

{
  "pages": [
    {
      "path": "/pages/index/index",
      "navigationBarTitleText": "首页",
      "disableScroll": true
    },
    {
      "path": "/pages/my/my",
      "navigationBarTitleText": "我的页面",
      "disableScroll": true
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#F56C6C",
    "onReachBottomDistance": 50
  },
  "tabBar": {
    "list": [
      {
        "text": "首页",
        "pagePath": "/pages/index/index",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      ...
    ]
  }
}

my.vue file

<template>
  <view class="container">
    <navigation-bar
      title="我的页面"
      :fixed="scrollTop > 0"
      :style="{ top: scrollTop + 'px' }"
    ></navigation-bar>
    <scroll-view
      :scroll-y="true"
      :style="{ height: windowHeight + 'px' }"
      @scroll="onPageScroll"
    >
      <!-- 页面内容 -->
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      windowHeight: 0
    }
  },
  methods: {
    onPageScroll(e) {
      this.scrollTop = e.detail.scrollTop
    },
    getWindowHeight() {
      uni.getSystemInfo({
        success: (res) => {
          this.windowHeight = res.windowHeight
        }
      })
    }
  },
  mounted() {
    this.getWindowHeight()
  }
}
</script>

<style>
.container {
  position: relative;
}
</style>

The above are the complete steps and steps for using uniapp to develop the navigation bar scrolling effect. Code examples. Through the following steps, you can easily implement the scrolling effect of the navigation bar to improve the user experience and application attractiveness. Hope this article is helpful to you.

The above is the detailed content of How to use uniapp to develop navigation bar scrolling effect. For more information, please follow other related articles on the PHP Chinese website!