禁止微信浏览器下拉查看 url 策略

724

正常情况下,微信浏览器页面下拉后可以看到一个 "『该网页由 xxxx 提供』,QQ 浏览器 X5 内核提供技术支持",有些项目中需要禁止微信浏览器下拉查看 url 策略

处理方案

一、禁止掉浏览器整个页面的滑动 (内容可用一屏展示时)

当所有内容可用一屏展示,并且页面不需要有滚动的情况下,该方法使用

// 禁止页面滚动
document.body.addEventListener('touchmove', function(e) {
e.preventDefault()
}, {passive: false})

二、页面布局避免超出滚动,结合 better-scroll 实现滚动功能(内容需要滚动区域时)

BetterScroll 默认处理容器(wrapper)的第一个子元素(content)的滚动,其它的元素都会被忽略。当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了

  • better-scroll 安装: npm install better-scroll --save
  • dom 结构加载完成时才执行初始化,在钩子函数 mounted()或者$nextTick 中初始化
  • 当需要异步获取数据渲染容器元素时,要在 DOM 重新渲染后(使用this.$nextTick),调用 refresh 方法重新计算,来确保滚动效果的正常
<style lang='less' scoped>
.chart-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  margin-bottom: 24px;
}
</style>
<template>
  <div class="chart-container" ref="wrapper">
    <div class="content">
        <p v-for="item in num" :key="item" @click="toAdd">当前序号{{item}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo',
  data() {
    return {
      num: 50,
      contentScroll: null
    }
  },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
    this.initScroll()
  },
  //方法集合
  methods: {
    initScroll() {
      if (!this.contentScroll) {  //没有初始化过则通过 new BScroll 初始化
        this.contentScroll = new BScroll(this.$refs.wrapper, {
          tap: true,
          click: true,
          // 容许y方向的滚动
          scrollY: true,
          // 页面滚动到两端时的过量回弹效果,默认是 true
          bounce: false,
          // 使用js实现滚动
          useTransition: false
        })
      } else {
        this.contentScroll.refresh() //已初始化则调用 this.scroll.refresh 方法重新计算
      }
    },
    toAdd() {
      this.num = this.num + 10
      this.$nextTick(() => {
        this.contentScroll.refresh()
        this.contentScroll.scrollTo(0, this.contentScroll.maxScrollY) //滚动到最底部
      })
    }
  }
}
</script>