解决微信上下滑动出现黑底背景问题

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中

猜你喜欢

转载自blog.csdn.net/sinat_15682257/article/details/79695616
今日推荐