uni-app小程式沉浸式導航實現的全過程

2022-10-10 14:00:16

1. 開始

專案要在多個頁面上加自定義導航欄，還要有漸變效果，就是隨著頁面上滑，導航欄透明度由0逐漸變為1。這裡面有幾個基本點需要注意下。

2. page的樣式

page 不能是height: 100%，可以設定height: auto，這樣才可以觸發 onPageScroll。

3. onPageScroll

只有 page 才有 onPageScroll 事件。試驗發現，mixin 和頁面內都寫了 onPageScroll 的話，都會觸發。

如果把它放在 mixin 中，寫成下面這樣，可能會有問題：

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

因為自定義導航欄不一定要在頁面級元件上，很多頁面都是寫在子元件裡，而 mixin 是各個元件各自維護了一份data，所以無法傳遞。這也是Vue元件和小程式元件的不同之處。

解決方法有多個：

將 onPageScroll 寫在頁面級元件上，然後獲取到 scrollTop 後傳給子元件，這種方法太麻煩
onPageScroll 依然寫在 mixin 中，儲存 scrollTop 到 vuex 的 state 中，然後在頁面或者元件中獲取這個 state

4. 效能問題

這裡面還有兩個效能相關的點要注意下：

只有頁面級元件或者個別元件需要用的資料，不要放在 mixin 的 data/computed 中。因為 mixin 是所有元件的混入，並且 uni-app 中所有 data 和 computed 都會作為渲染依賴（不管用沒用到），可能會引起很多效能開銷。
onPageScroll 中不要做複雜邏輯，不要頻繁呼叫 setData，在 uni-app 中就是不要頻繁更新 data。因為小程式是雙執行緒通訊，邏輯層更改資料要先到 native層，再傳到渲染層，中間可能還有 JSON.stringify 等操作。

5. 方案

綜上，目前採用的方案是：

mixin中，監聽 onPageScroll，因為這個在只會在當前頁面觸發，子元件會被忽略，所以寫在這裡並不影響效能。
vuex 中儲存 pageScrollTop、mpHeaderHeight，及一個衍生變數 mpHeaderBg。
然後，需要使用 mpHeaderBg 的頁面，去參照 vuex 中的變數。
如果想要在一個新頁面加上漸變導航，只需要參照 vuex 中的 mpHeaderBg 即可。

6. 程式碼

// 某個頁面
<template>
  <MatchHeaderMp
    :header-bg="mpHeaderBg"
  />
</template>
<script>
computed: {
  mpHeaderBg() {
    // getMpHeaderBg 方法來自於 mixin
    return this.getMpHeaderBg();
  },
}
</script>

// mixin
export const uniSystemInfoMixin = {
  data() {
    return {
      // page-meta上設定的根標籤字型大小
      mixinRootFontSize: 50,
    };
  },
  mounted() {
    // 設定根字型大小
    this.onSetFontSize();
  },
  onPageScroll({ scrollTop }) {
    const mpHeaderHeight = this.$store.state.wxHeader.mpHeaderHeight || 44;
    const pageScrollTop =  this.$store.getters.['wxHeader/pageScrollTop'] || 44;
    const parsedScrollTop = scrollTop > mpHeaderHeight ? mpHeaderHeight : scrollTop;

    // 如果滑動值大於 mpHeaderHeight，就不再更新 data
    if (parsedScrollTop === mpHeaderHeight && pageScrollTop === mpHeaderHeight) {
      return;
    }
    this.$store.commit('wxHeader/setPageScrollTop', parsedScrollTop);
  },
  beforeDestroy() {
    if (this.mpType === 'page') {
      this.$store.commit('wxHeader/setPageScrollTop', 0);
    }
  },
  methods: {
    getMpHeaderBg() {
      const pageScrollTop = this.getMpPageScrollTop();
      const mpHeaderHeight = this.$store.state.wxHeader.mpHeaderHeight || 44;
      return `rgba(255, 255, 255, ${Math.min(1, pageScrollTop / mpHeaderHeight)})`;
    },
    getMpPageScrollTop() {
      const curPageName = this.getCurPageName();
      const pageScrollTopMap = this.$store.state.wxHeader.pageScrollTopMap || {};
      return pageScrollTopMap[curPageName] || 0;
    },
    getCurPageName() {
      const pages = getCurrentPages();
      return pages[pages.length - 1].route;
    },
    onSetFontSize() {
      // 寬度 375 時（iphone6），rootFontSize為50，則一份為 375/50=7.5
      const screenNumber = 7.5;
      const that = this ;

      if (that.mpType === 'page') {
        // 表單改變大小觸發事件
        uni.onWindowResize((res) => {
          if (res.size.windowWidth) {
            that.mixinRootFontSize = parseFloat(res.size.windowWidth) / screenNumber;
          }
        });

        // 開啟獲取螢幕大小
        uni.getSystemInfo({
          success(res) {
            const fontsize = res.screenWidth / screenNumber;
            that.mixinRootFontSize = fontsize;
            const mpHeaderHeight = res.statusBarHeight + 44;
            that.$store.commit('wxHeader/setMpHeaderHeight', mpHeaderHeight);
          },
        });
    }
    },
  },
};

// store/modules/wx-header.js
const wxHeaderStore = {
  namespaced: true,
  state: () => ({
    // 存放多個頁面的pageScrollTop
    pageScrollTopMap: {},
    // 狀態列高度
    mpHeaderHeight: 44,
  }),
  mutations: {
    setPageScrollTop(state, pageScrollTop = 0) {
      const curPageName = getCurPageName();
      state.pageScrollTopMap = {
        ...state.pageScrollTopMap,
        [curPageName]: pageScrollTop,
      };
    },
    setMpHeaderHeight(state, mpHeaderHeight) {
      state.mpHeaderHeight = mpHeaderHeight;
    },
  },
};