uniapp 如何禁止切换菜单栏时触发onshow

在 uni-app 中，切换菜单栏时会触发页面的 onShow 生命周期函数。如果你想禁止切换菜单栏时触发 onShow 函数，可以通过监听页面滚动事件来实现。

具体实现方式如下：

1. 在页面组件中定义一个 `scrollPosition` 变量，用来记录页面滚动的位置。

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        scrollPosition: 0
      };
    },

    onPageScroll(e) {
      this.scrollPosition = e.scrollTop;
    },

    onShow() {
      if (this.scrollPosition === 0) {
        // 执行需要的操作
        // TODO
      }
    }
  };
</script>

2. 在页面组件中，监听页面滚动事件，并在滚动事件处理函数中记录页面滚动的位置。

3. 在 onShow 函数中，判断页面滚动的位置是否为0，如果是0则执行需要的操作。

通过这种方式，我们可以在页面切换菜单栏时禁止触发 onShow 函数。当页面滚动的位置为0时，说明页面已经滚到了顶部，此时可以执行需要的操作。如果页面滚动的位置不为0，则说明页面正在滚动，不执行任何操作。

相关问题

uniapp切换菜单栏时禁止触发onshow

如果你想在 uni-app 切换菜单栏时禁止触发 onShow 函数，可以使用 uni-app 提供的生命周期钩子函数 onPageScroll。在 onPageScroll 函数中监听页面滚动事件，当滚动距离大于0时，说明页面正在滚动，此时不执行任何操作；当滚动距离为0时，说明页面停止滚动，可以执行需要的操作。

具体实现方式如下：

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
  export default {
    onPageScroll(e) {
      // 如果页面正在滚动，不执行任何操作
      if (e.scrollTop > 0) {
        return;
      }

      // 页面停止滚动，执行需要的操作
      // TODO
    }
  };
</script>

在这个例子中，我们在页面中定义了一个 onPageScroll 函数，在函数中监听页面滚动事件，并根据滚动距离来判断页面是否正在滚动。如果页面正在滚动，函数直接返回，不执行任何操作；如果页面停止滚动，函数执行需要的操作。

解决uniapp切换菜单栏时会触发onshow的问题

如果你不想在 uni-app 切换菜单栏时触发 onShow 函数，可以在 App.vue 中实现一个全局的状态管理，用一个变量来记录当前页面是否需要触发 onShow 函数。具体实现方式如下：

1. 在 App.vue 中定义一个全局变量 `needShow`，用来标识当前页面是否需要触发 onShow 函数。

<template>
  <div>
    <!-- 页面内容 -->
    <router-view :needShow="needShow"></router-view>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        needShow: true
      };
    },

    methods: {
      // 切换菜单栏时，设置 needShow 为 false，不触发 onShow 函数
      switchTab(e) {
        const index = e.index;
        if (index === 0) {
          this.needShow = false;
        } else {
          this.needShow = true;
        }
      }
    }
  };
</script>

2. 在页面组件中，利用 props 接收 App.vue 中传递的 `needShow` 变量，并在 onShow 函数中根据 `needShow` 变量的值来判断是否需要执行相关操作。

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
  export default {
    props: {
      needShow: {
        type: Boolean,
        default: true
      }
    },

    onShow() {
      if (this.needShow) {
        // 执行需要的操作
        // TODO
      }

      // 重置 needShow 为 true，确保下次切换菜单栏时能够触发 onShow 函数
      this.$emit("update:needShow", true);
    }
  };
</script>

在这个例子中，我们在 App.vue 中定义了一个全局变量 `needShow`，并在切换菜单栏时根据当前选中的菜单项来设置 `needShow` 的值。在页面组件中，我们利用 props 接收 App.vue 中传递的 `needShow` 变量，并在 onShow 函数中根据 `needShow` 变量的值来判断是否需要执行相关操作。需要注意的是，我们在页面组件中通过 `$emit` 方法来更新 `needShow` 变量的值，确保下次切换菜单栏时能够触发 onShow 函数。