<template>
<div class="center" @mousewheel="scroll">
<div
v-for="(item, index) in list"
:key="index"
:ref="item"
class="box"
:class="isShow > index ? 'show' : ''"
>
<h2>{{ item }}</h2>
</div>
</div>
</template>
<script>
export default {
components: {},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
data() {
return {
list: ["a", "b", "c", "d", "e", "f", "g","a1", "b1", "c1", "d1", "e1", "f1", "g1"],
isShow: 0,
};
},
methods: {
scroll() {
const triggerBottom = (window.innerHeight / 5) * 4;
this.list.forEach((item, idx) => {
let boxTop = this.$refs[item][0].getBoundingClientRect().top;
console.log(boxTop, '=====',idx)
if (boxTop < triggerBottom) {
this.isShow = idx + 2;
}
});
console.log(triggerBottom, "=====");
},
},
created() {},
mounted() {
this.scroll()
},
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
* {
box-sizing: border-box;
}
.center {
background-color: #efedd6;
font-family: "Roboto", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0;
overflow-x: hidden;
margin-bottom: 230px;
}
h1 {
margin: 10px;
}
.box {
background-color: steelblue;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
width: 400px;
height: 200px;
margin: 10px;
border-radius: 10px;
box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
transform: translateX(400%);
transition: transform 0.4s ease;
}
.box:nth-of-type(even) {
transform: translateX(-400%);
}
.box.show {
transform: translateX(0);
}
.box h2 {
font-size: 45px;
}
</style>
滚动显示内容:每天一个功能(3)
最新推荐文章于 2022-08-25 23:43:46 发布