解决微信上下滑动出现黑底背景问题
2018-03-26 11:23
363 查看
1.html
<keep-alive>
<router-view class="router-view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
2.js部分
function scrollFix (scrollEl, targetSelector) {
const offset = 5
let startY = 0
scrollEl.addEventListener('touchstart', e => { startY = e.touches[0].pageY })
scrollEl.addEventListener('touchmove', e => {
const y = startY - e.touches[0].pageY
const pullDownAction = y < -offset
const pullUpAction = y > offset
const viewHeight = document.documentElement.clientHeight
const targetEl = scrollEl.querySelector(targetSelector)
if (!targetEl) return
if ((pullDownAction && targetEl.scrollTop <= 0) || (pullUpAction && Math.floor(targetEl.scrollHeight - viewHeight) <= targetEl.scrollTop)) {
e.preventDefault()
}
})
}
scrollFix(this.$el, '.router-view') //this.$el指 是当前组件的的元素 代码写在app.vue中
<keep-alive>
<router-view class="router-view" v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
2.js部分
function scrollFix (scrollEl, targetSelector) {
const offset = 5
let startY = 0
scrollEl.addEventListener('touchstart', e => { startY = e.touches[0].pageY })
scrollEl.addEventListener('touchmove', e => {
const y = startY - e.touches[0].pageY
const pullDownAction = y < -offset
const pullUpAction = y > offset
const viewHeight = document.documentElement.clientHeight
const targetEl = scrollEl.querySelector(targetSelector)
if (!targetEl) return
if ((pullDownAction && targetEl.scrollTop <= 0) || (pullUpAction && Math.floor(targetEl.scrollHeight - viewHeight) <= targetEl.scrollTop)) {
e.preventDefault()
}
})
}
scrollFix(this.$el, '.router-view') //this.$el指 是当前组件的的元素 代码写在app.vue中
相关文章推荐
- 如何解决iphone手机微信浏览器中滑动到页面底部出现黑色背景盖住position:fixed的页面元素的问题?
- H5解决浏览器,微信背景的上下滑动问题,脱离窗口的js局部滚动解决方法
- android listview 上下滑动背景变黑的问题解决
- 修复在“Android 在ScrollView中嵌入ViewPage后ViewPage不能很好的工作的问题解决”这篇博客中MyScrollView出现滑动一会就不会上下滑动的问题
- ListView滑动时 item出现黑色背景的问题的解决方法
- android --解决GridView上下滑动出现错位问题
- Android:解决ListView按下后上下滑动背景全部变黑的问题
- ListView滑动时 item出现黑色背景的问题的解决方法
- ListView滑动时 item出现黑色背景的问题的解决方法
- ListView滑动时 item出现黑色背景的问题的解决方法
- Android:解决ListView按下后上下滑动背景全部变黑的问题
- 微信小程序request出现400的问题解决办法
- 解决在scrollview上下滑动嵌套scrollview,viewpager水平滑动时的抖动问题
- 将Bitmap用Base64转码成字符串,再解码回来出现黑色背景的问题原因及解决办法。
- css ios H5页面web页面 上下滑动卡顿问题解决方案(亲测)
- ios 滑动返回出现问题以及解决方法
- 关于ListView上下滑动时背景变黑的问题
- ubuntu下vi配置,解决按上下健等出现字母问题
- 解决滚屏背景/拼接地图有黑边(缝隙)/动画播放出现毛边以及禁止游戏中自动锁屏问题!
- android 解决weixin微信jar包在打包的时候出现的java.io.IOException: Can't read问题