文章目录
1.封装Film下的二级路由
目的/效果
步骤
- 新建views/Film文件夹下的FilmHeader.vue组件
<template>
<div>
<ul>
<router-link to="/film/nowplaying" tag="li" active-class="active">正在热映</router-link>
<router-link to="/film/comingSoon" tag="li" active-class="active">即将上映</router-link>
</ul>
</div>
</template>
<style lang="scss" scoped>
ul{
display: flex;
li{
flex:1;
height: 40px;
line-height: 40px;
text-align: center;
background: white;
}
}
.active{
color:red;
border-bottom: 1px solid red;
}
</style>
- 在Film.vue中引入FilmHeader.vue组件
<template>
<div>
<filmheader></filmheader>
</div>
</template>
<script>
import filmheader from "./Film/FilmHeader"
export default {
components:{
filmheader
}
}
</script>
2.让FilmHeader.vue实现向下滑动时的吸顶效果(固钉效果)
思路
监听滚动事件,动态获取轮拨图高度,比较两者,
吸顶效果:设置固定定位的元素left和top为0
步骤
- 监听滚动事件window.onscroll
Film.vue
...
mounted(){
window.onscroll=this.handleScroll;
},
methods:{
handleScroll(){
console.log("11111");
}
}
实现效果:鼠标滚动,触发handleScroll函数,说明监听成功
- 为handleScroll函数添加逻辑:当滚动距离大于轮拨图高度时,添加吸顶效果(position:fixed)
handleScroll(){
// 1.获取鼠标滚动距离
console.log(document.documentElement.scrollTop);
// 2.获取轮拨高度:使用ref动态获取(swiper占位符设置 ref="myswiper")
console.log(this.$refs.myswiper.$el.offsetHeight);//this.$refs.myswiper.$el是获取原生DOM对象
// 3.设置判断条件,是否为filmheader添加固定定位
if(document.documentElement.scrollTop>=this.$refs.myswiper.$el.offsetHeight){
console.log("fixed");
}else{
console.log("no-fixed");
}
}
- 为FilmHeader组件动态添加类名,为这个类设置固定定位
Film.vue(全部代码)
<template>
<div>
<!-- 在Film中插入一个轮拨 -->
<swiper ref="myswiper"></swiper>
<!-- 电影页面头部封装 -->
<!-- 为组件动态添加class:直接在占位符添加 -->
<!-- class前加冒号:可以判断引号中的js语句,否则当成普通字符串 -->
<filmheader :class="isFixed?'fixed':''"></filmheader>
<!-- 路由占位符:让路由显示的位置 -->
<router-view></router-view>
</div>
</template>
<script>
// 导入Swiper.vue组件
import swiper from "./Film/Swiper"
import filmheader from "./Film/FilmHeader"
export default {
data:function(){
return{
isFixed:false
}
},
components:{
// 注册
swiper,
filmheader
},
mounted(){
window.onscroll=this.handleScroll;
},
methods:{
handleScroll(){
// 1.获取鼠标滚动距离
// console.log(document.documentElement.scrollTop);
// 2.获取轮拨图高度:使用ref动态获取
// console.log(this.$refs.myswiper.$el.offsetHeight);//this.$refs.myswiper.$el是获取原生DOM对象
// 3.设置判断条件,是否为filmheader添加固定定位
if(document.documentElement.scrollTop>=this.$refs.myswiper.$el.offsetHeight){
this.isFixed=true;
}else{
this.isFixed=false;
}
}
}
}
</script>
FilmHeader.vue(部分代码)
.fixed{
position: fixed;
left:0;
top:0;
// 把未滚动的样式也复制下来,使得滚动后的样式不变
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
background: white;
}
最终效果
滚动前:
吸顶:
3.离开Film页面时取消触发handleScroll
目的
因为window.onscroll是全局属性,在别的页面也会生效,
如此可能会造成不好的结果
思路
在钩子函数mounted中绑定,在beforeDestroy中解绑
代码
Film.vue
mounted(){
window.onscroll=this.handleScroll;
},
beforeDestroy(){
//console.log("触发了beforeDestroy...");//离开Film页面触发beforeDestroy(){}函数
window.onscroll=null;//离开Film页面解绑window.onscroll
},
4.知识点
- class前加冒号:可以判断引号中的js语句,否则当成普通字符串
- 吸顶效果:设置固定定位的元素left和top为0
- 获取轮拨图高度:使用ref动态获取
-
- swiper占位符设置
ref="myswiper"
- swiper占位符设置
-
- 获取原生DOM对象:
this.$refs.myswiper.$el
- 获取原生DOM对象:
-
- 获取此DOM对象的高度
this.$refs.myswiper.$el.offsetHeight
- 获取此DOM对象的高度
- 获取鼠标滚动距离:
document.documentElement.scrollTop