vue 吸顶

使用vue实现吸顶功能，如下：

 

实现代码如下（film.vue）：

<template>
     <div>
         <!--<div>轮播组建</div>-->
         <!--<filmnav/>-->
         <!--ref绑定原生节点-->
         <fileswiper :key="datalist.length" ref="fileswiper">
             <div class="swiper-slide" v-for="data in datalist" :key="data.bannerId">
                 <img :src="data.imgUrl" >
             </div>
         </fileswiper>
         <filmnav :class="isFixed?'fixed':''"></filmnav>
          <!--<ul>-->
            <!--<router-link to="/film/nowplaying" tag="li" activeClass="active">正在热映</router-link>-->
            <!--<router-link to="/film/commingsoon" tag="li" activeClass="active">即将上映</router-link>-->
            <!--&lt;!&ndash;<router-link to="/center" tag="li" activeClass="active">我的</router-link>&ndash;&gt;-->
        <!--</ul>-->
         <div>
             <router-view/>
         </div>
    </div>
</template>

<script>
    import filmnav from './film/filmnav'
    import fileswiper from './film/fileswiper'
    import axios from 'axios'
    export default {
        // name: "film"
        data(){
            return{
                datalist:[],
                isFixed:false
            }
        },
        components:{
            filmnav,
            fileswiper,
        },
        mounted(){
            axios({
                url:"https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=2889392",
                headers:{
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"159962182681368155422722","bc":"310100"}',
                    'X-Host': 'mall.cfg.common-banner',
                }
                }).then(res=>{
                    this.datalist = res.data.data;
                    });
            window.onscroll = this.handleScroll; //页面滚动执行代码
            },
        methods:{
            handleScroll(){

                // console.log(document.documentElement.scrollTop); //鼠标滚动位置
                // console.log(this.$refs.fileswiper.$el); //refs拿到绑定的原生节点
                if(document.documentElement.scrollTop > this.$refs.fileswiper.$el.offsetHeight){
                     // console.log('fixed')
                    this.isFixed = true;
                }else{
                     // console.log('unfixed')
                    this.isFixed = false;
                }
            }
        }
    }
</script>

<style scoped>
     .active{
        color:red;
        border-bottom: 5px solid red;
    }
    ul{
        display: flex;
        padding:0;
    }
    li{

        flex: 1;
        height: 40px;
        line-height: 40px;
        text-align: center;
        list-style: none;
    }
</style>

在film.vue 的代码解释：

标记2 的ref绑定原生节点 fileswiper

标记3 实现把父节点的class传输到自己点

 

吸顶需要的dom 参数

标记2 实现页面滚动监控

标记3 获取页面最顶点的滚动位置

标记4 获取对象的高度

当滚动区域高度大鱼轮播图高度的时候开始实现通过class修改样式，实现顶端固定吸顶

offsetheight的含义如下图;

 

vue的子函数filmnav.vue文件代码如下：

<template>
    <div>
        <ul>
            <router-link to="/film/nowplaying" tag="li" activeClass="active">正在热映</router-link>
            <router-link to="/film/commingsoon" tag="li" activeClass="active">即将上映</router-link>
            <!--<router-link to="/center" tag="li" activeClass="active">我的</router-link>-->
        </ul>
    </div>
</template>

<script>
    export default {
        // name: "filmnav"
    }
</script>

<style scoped>

    .active{
        color:red;
        border-bottom: 5px solid red;
    }
    ul{
        display: flex;
        padding:0;
    }
    li{

        flex: 1;
        height: 40px;
        line-height: 40px;
        text-align: center;
        list-style: none;
        background-color: white;
    }
    .fixed{
        position:fixed;
        left: 0;
        top:0;
        width: 100%;
        height: 40px;
        background: white;

    }
</style>

通过class实现吸顶函数解析图片如下：

 

标记2 在filmnav 中的.fiexd 实现固定