Skip to content
本文总阅读量

一个uni-app构建的 H5 页面

页面中组件搜索弹窗覆盖高度 100%,想要监听 app 返回只关闭弹窗

js
<script>
export default {
  data() {
    return {
      isShowSearch: false,
    }
  },
methods: {
  pushHistory() {
    const that = this
    window.addEventListener(
      "popstate",
      function (e) {
        that.isShowSearch = false
      },
      false
    )
    /**
    调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。
    popstate 事件只会在浏览器某些行为下触发,比如点击后退按钮(或者在 JavaScript 中调用 history.back() 方法)。
    即,在同一文档的两个历史记录条目之间导航会触发该事件
    */
    // 每次点击相关操作时都调用pushHistory函数,这样每次切换页面时都会添加一个新的历史记录,从而让popstate事件能够被触发
    window.history.pushState(null, null, "")
  }
  onSelectTag() {
    this.isShowSearch = true
    this.pushHistory()
  }
}
}
</script>