正常情况下,微信浏览器页面下拉后可以看到一个 "『该网页由 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>