Question

我目前正在使用Vuejs并路由到其他页面。对于我的照片链接，我想要一张覆盖整个屏幕的主封面照片。

<template>
    <div id="album-container">

     <div class="cover-image"></div>

     <section class='intro'>Lorem </section>

     <div class="image-flex-wrap">
        <div class="image-cell" v-for="image in images">
            <img :src="image">
        </div>
     </div>

    </div>
</template>



.cover-image {
   background: url('my photo') #fff  no-repeat center center;
   background-size: cover;
   height: 100vh;
}

这会以我想要的方式显示页面，但是当我从之前向下滚动的页面路由到此页面时出现问题。它不是从页面顶部开始，而是从我的封面图片div的中间开始。我认为问题与高度有关：100vh，因为如果我用position：absolute和100％的宽度替换它，那么页面将从顶部开始。但是，我想避免使用绝对定位但不知道足够的css来理解为什么会发生这种情况。

Answer 1

感谢您的建议。

这个问题与Vuejs无关。我没有提到我使用的是Material Design Lite，因为我没想到它会成为原因但不幸的是它。由于它的工作方式，您不再通过MDL提供的.mdl-layout__content类滚动窗口对象。这就是为什么与窗口相关的所有滚动属性都返回0。

我只是在我的路线上设置一个手表方法来强制使用scrollTop。

watch: {
 $route() {
  document.getElementsByClassName('mdl-layout').scrollTop = 0;
 }
}

Answer 2

它也可能与vue-router配置的scrollBehaviour相关，请尝试在配置中添加以下scrollBehaviour：

export default new Router({
  mode: 'history',
  scrollBehavior: (to, from, savedPosition) => {
    if (to.hash) {
      return {selector: to.hash}
    } else {
      return {x: 0, y: 0}
    }
  },
  routes: [
    { path: '/', component: landingView },
     ....
     ....
    { path: '/healthcheck', name: 'healthcheck', component: healthCheckView }
  ]
})

由于div的高度，页面不会从顶部开始

2 个答案: