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

文章目录

1.封装Film下的二级路由
- 目的/效果
- 步骤
2.让FilmHeader.vue实现向下滑动时的吸顶效果(固钉效果)
- 思路
- 步骤
- 最终效果
3.离开Film页面时取消触发handleScroll
- 目的
- 思路
- 代码
4.知识点

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

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

2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
2021-12-07 vue移动端卖座电影项目(七) 封装轮拨组件,使之可用于详情页Detail,实现演职员表的轮拨和剧照的轮拨
文章目录 0.实现效果 1.封装详情页的轮拨组件DetailSwiper 2.perView:显示张数设置为动态,两个轮拨图分别初始化的方法:重命名并获取当前的class名 3.最终代码和效果代码 ...
2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页卖座电影 1.获取url数据位置:网络>复制>复制链接地址 2.获取电影列表数据字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
2021-12-14 vue移动端卖座电影项目(十二) 使用mapState控制封装选项卡tabbar的显隐,以及回顾使用中央事件总线eventbus和vuex的state控制tabbar显隐的异同
文章目录 0.实现场景:进入详情页时,底部选项卡隐藏 1.使用中央事件总线控制tabbar的v-show的值 2.使用vuex的state控制tabbar的v-show的值 3.使用vuex的muta ...
2021-11-30 vue移动端卖座电影项目(四) 当前项目代码
文章目录 0.目录和package.json依赖 1.src/assets/iconfont(文件夹) 2.src/components/tabbar.vue 3.router/index.js 4. ...
2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件目的步骤结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片目的步骤因为现在原网站已取消轮拨 ...
2021-12-11 vue移动端卖座电影项目(十一) comingSoon用后台获取的数据写样式,以及用vuex的Action处理异步问题:切换FilmHeader中的两个标签时直接缓存数据
文章目录 0.vuex工作流程图复习 1.思路 2.axios获取后台数据(仿nowPlaying页即可) 3.用vuex的Action处理异步问题:切换FilmHeader中的"正在热映& ...
2021-12-09 vue移动端卖座电影项目(九) 使用事件总线EvenetBus控制选项卡tabbar的显隐(进入入详情页时隐藏)
文章目录 0.事件总线复习 1.显隐逻辑 2.Detail.vue和它要控制的tabbar.vue不是父子关系 3.使用中央事件总线来控制 4.效果 0.事件总线复习 2021-10-21 vue笔记 ...
2021-12-10 vue移动端卖座电影项目(十) 使用状态管理模式vuex的state控制选项卡tabbar的显隐,mutation的用法,this.$store.commit()的两个参数
文章目录 0.vuex复习 1.引入 2.在state中存showTabbar后,直接可以引用 3.在Detail.vue的两个钩子函数中设置控制showTabbar的布尔值 4.效果:实现进入详情页 ...

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

文章目录

1.封装Film下的二级路由

目的/效果

步骤

2.让FilmHeader.vue实现向下滑动时的吸顶效果(固钉效果)

思路

步骤

最终效果

3.离开Film页面时取消触发handleScroll

目的

思路

代码

4.知识点

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

最新文章

热门文章