我正在尝试在Vue.js 3中滚动Snap到组件。我可以让滚动管理单元与香草HTML和CSS正确工作。它看起来像这样:Scroll Snap Demo
我试图复制这个简单的布局,但使用App.js作为容器,使用组件作为div。以下是App.vue中的外观:
<template class="container">
<CompI class="snapAlign"/>
<CompII class="snapAlign"/>
<CompIII class="snapAlign"/>
<CompIV class="snapAlign"/>
</template>
<script>
import CompI from './components/CompI.vue'
import CompII from './components/CompII.vue'
import CompIII from './components/CompIII.vue'
import CompIV from './components/CompIV.vue'
export default {
name: 'App',
components: {
CompI,
CompII,
CompIII,
CompIV
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
.container{
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.snapAlign{
scroll-snap-align: start;
}
</style>
这是我得到的组件,它们基本上彼此相同:
<template>
<div class="one">
<h1>One</h1>
</div>
</template>
<script>
export default {
name: 'CompI'
}
</script>
<style scoped>
.one{
height: 100vh;
width: 100vw;
background-color: green;
}
</style>
我也试过使用vue-scroll-snap,但它在组件上的工作方式似乎不像指南中显示的那样在div上工作。这是我尝试的指南:Vue Scroll Snap Guide
以下是我使用该方法为App.vue所做的工作:
<template>
<vue-scroll-snap >
<CompI/>
<CompII/>
<CompIII/>
<CompIV/>
</vue-scroll-snap>
</template>
<script>
import CompI from './components/CompI.vue'
import CompII from './components/CompII.vue'
import CompIII from './components/CompIII.vue'
import CompIV from './components/CompIV.vue'
import VueScrollSnap from "vue-scroll-snap"
export default {
name: 'App',
components: {
CompI,
CompII,
CompIII,
CompIV,
VueScrollSnap
}
}
</script>
<style>
*{
margin: 0;
padding: 0;
text-align: center;
}
</style>
组件与其他方法相同。
页面显示正确,但这两种尝试都没有滚动捕捉效果。我想尝试使用组件作为全屏元素来捕捉,应用程序将更好地扩展这样。
+解决方案
Ivo Gelov是正确的,从<template>
中删除类,将组件放在div中,并给予它类“container”。出于某种原因,仅仅是不够的,更多的风格是需要对这个类,然后它的工作。下面是这个类的最终CSS:
.container{
width: 100%;
height: 100vh;
margin: 0 auto;
overflow-x: hidden;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
1条答案
按热度按时间wi3ka0sx1#
转到index.html并在HTML部分下面添加以下内容:
然后转到App.vue并简单地将其添加到每个组件中:
它应该能起作用。