2021-12-02 vue移动端卖座电影项目(五) 封装Film下的二级路由,FilmHeader实现吸顶效果

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"
    • 获取原生DOM对象:this.$refs.myswiper.$el
    • 获取此DOM对象的高度this.$refs.myswiper.$el.offsetHeight
  • 获取鼠标滚动距离:document.documentElement.scrollTop
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值