The entire process of implementing immersive navigation of uni-app applets

1. Begin

The project needs to add a custom navigation bar to multiple pages, and also has a gradient effect, that is, as the page slides, the transparency of the navigation bar gradually changes from 0 to 1. There are a few basic points to pay attention to here.

2. Page style

page cannot beheight: 100%, can be setheight: auto, so that onPageScroll can be triggered.

3. onPageScroll

Only page has onPageScroll events. Experiment found that if both mixin and onPageScroll are written in the page, they will be triggered.

If you put it in a mixin and write it as follows, there may be problems:

data() {
  return {
    pageScrollTop: 0,
  };
},
onPageScroll({ scrollTop }) {
   = scrollTop || 0;
},

Because the custom navigation bar does not have to be on page-level components, many pages are written in subcomponents, and mixin is that each component maintains a copy of data, so it cannot be passed. This is also the difference between Vue components and applet components.

There are multiple solutions:

• Write onPageScroll on a page-level component, then get scrollTop and pass it to the child component. This method is too troublesome
• onPageScroll is still written in the mixin, save scrollTop into the state of vuex, and then get this state in the page or component

4. Performance issues

There are two performance-related points to note:

• Only the data required by page-level components or individual components should not be placed in the data/computed in the mixin. Because mixin is a mix in all components, and all data and computered in uni-app will be used as rendering dependencies (whether it works or not), it may cause a lot of performance overhead.
• Don’t do complex logic in onPageScroll, don’t call setData frequently, and do not update data frequently in uni-app. Because the applet is a two-thread communication, the logic layer needs to change data to the native layer first, and then pass it to the rendering layer, and there may be other operations in the middle.

5. Plan

In summary, the current solutions are:

• In mixin, listen to onPageScroll, because this will only be triggered on the current page and the child components will be ignored, so writing here will not affect performance.

• In vuex, pageScrollTop, mpHeaderHeight, and a derivative variable mpHeaderBg are saved.

• Then, you need to use the page of mpHeaderBg to reference variables in vuex.

• If you want to add gradient navigation to a new page, you just need to reference mpHeaderBg in vuex.

6. Code

// A page<template>
  <MatchHeaderMp
    :header-bg="mpHeaderBg"
  />
</template>
<script>
computed: {
  mpHeaderBg() {
    // The getMpHeaderBg method comes from mixin    return ();
  },
}
</script>

// mixin
export const uniSystemInfoMixin = {
  data() {
    return {
      // The font size of the root tag set on page-meta      mixinRootFontSize: 50,
    };
  },
  mounted() {
    // Set the root font size    ();
  },
  onPageScroll({ scrollTop }) {
    const mpHeaderHeight = this.$ || 44;
    const pageScrollTop =  this.$.['wxHeader/pageScrollTop'] || 44;
    const parsedScrollTop = scrollTop > mpHeaderHeight ? mpHeaderHeight : scrollTop;

    // If the sliding value is greater than mpHeaderHeight, the data will no longer be updated    if (parsedScrollTop === mpHeaderHeight && pageScrollTop === mpHeaderHeight) {
      return;
    }
    this.$('wxHeader/setPageScrollTop', parsedScrollTop);
  },
  beforeDestroy() {
    if ( === 'page') {
      this.$('wxHeader/setPageScrollTop', 0);
    }
  },
  methods: {
    getMpHeaderBg() {
      const pageScrollTop = ();
      const mpHeaderHeight = this.$ || 44;
      return `rgba(255, 255, 255, ${(1, pageScrollTop / mpHeaderHeight)})`;
    },
    getMpPageScrollTop() {
      const curPageName = ();
      const pageScrollTopMap = this.$ || {};
      return pageScrollTopMap[curPageName] || 0;
    },
    getCurPageName() {
      const pages = getCurrentPages();
      return pages[ - 1].route;
    },
    onSetFontSize() {
      // When the width is 375 (iphone6), rootFontSize is 50, then one portion is 375/50=7.5      const screenNumber = 7.5;
      const that = this ;

      if ( === 'page') {
        // Change the form size to trigger the event        ((res) => {
          if () {
             = parseFloat() / screenNumber;
          }
        });

        // Open to get screen size        ({
          success(res) {
            const fontsize =  / screenNumber;
             = fontsize;
            const mpHeaderHeight =  + 44;
            that.$('wxHeader/setMpHeaderHeight', mpHeaderHeight);
          },
        });
    }
    },
  },
};

// store/modules/
const wxHeaderStore = {
  namespaced: true,
  state: () => ({
    // pageScrollTop that stores multiple pages    pageScrollTopMap: {},
    // Status bar height    mpHeaderHeight: 44,
  }),
  mutations: {
    setPageScrollTop(state, pageScrollTop = 0) {
      const curPageName = getCurPageName();
       = {
        ...,
        [curPageName]: pageScrollTop,
      };
    },
    setMpHeaderHeight(state, mpHeaderHeight) {
       = mpHeaderHeight;
    },
  },
};

7. Things to note

• Do not share the same variable on multiple pages, as multiple pages may affect each other.
• The applet re-enters a certain page and will return to the top, includingpageand allscroll view, so you have tobeforeDestroyReset in the middlepageScrollTop。

Summarize

This is the article about the implementation of immersive navigation of uni-app applets. For more related content of immersive navigation of uni-app applets, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!