zoukankan      html  css  js  c++  java
  • vue五十八:电影院售票项目案例之项目吸顶效果

    先实现film-header导航

    实现film-header组件

    FilmHeader组件

    <template>
    <div>
    <ul>
    <router-link to="/film/nowplaying" tag="li" active-class="isActive">正在热映</router-link>
    <router-link to="/film/comingsoon" tag="li" active-class="isActive">即将上映</router-link>
    </ul>
    </div>
    </template>

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

    <style lang="scss" scoped>
    ul {
    display: flex;

    li {
    flex: 1;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: white;
    }
    }

    .isActive {
    color: blue;
    border-bottom: 2px solid red;
    }
    </style>

    在film中引用并注册使用

    效果

    实现吸顶效果,即当下拉数据过多时,film-header固定在顶部,不会一直往上顶,然后消失

    准备好css

    .fixed {
    position: fixed;
    left: 0px;
    top: 0px;
    100%;
    height: 40px;
    background: white;
    }

    监听滚动事件

    判断如果滚动距离大于轮播的高度,触发吸顶效果

    获取滚动高度和轮播高度

    实现动态添加已经定义好的fixed属性

    以后不管怎么滚,film-header都被固定在顶部了

    由于是单页面应用,所以不管是在哪个组件中都会触发这个事件,会报错,所以限定在Film组件中才触发,即注销或者离开组件的时候触发销毁此事件

    Film

    <template>
    <div>
    <swiper ref="swiperHeight">
    <div class="swiper-slide" v-for="data in looplist" :key="data">
    <img :src="data">
    </div>
    </swiper>
    <filmheader :class="isFixed?'fixed':''"></filmheader>
    <router-view></router-view>
    </div>
    </template>

    <script>
    import swiper from './Film/Swiper'
    import filmheader from './Film/FilmHeader'

    export default {
    // 把swiper注册为局部组件
    components: {
    swiper,
    filmheader
    },
    mounted() {
    window.onscroll = this.handleScroll // 滚动式触发handleScroll方法
    },
    beforeDestroy() {
    window.onscroll = null // 离开此组件的时候,不再绑定滚动事件
    },
    methods: {
    handleScroll() {
    // console.log('滚动距离: ', document.documentElement.scrollTop) // 获取滚动距离
    // console.log('轮播高度: ', this.$refs.swiperHeight.$el.offsetHeight) // 获取轮播高度
    if (document.documentElement.scrollTop >= this.$refs.swiperHeight.$el.offsetHeight) {
    // 触发吸顶
    this.isFixed = true
    } else {
    // 不触发或者解除吸顶
    this.isFixed = false
    }
    }
    },
    data() {
    return {
    isFixed: false,
    looplist: [
    'https://pic.maizuo.com/usr/movie/09348aa4f961d2cb7e8f7c1e5f6e4e90.jpg',
    'https://pic.maizuo.com/usr/movie/b53c4929604aee63de73c8506c756552.jpg',
    'https://pic.maizuo.com/usr/movie/7ff392084571e12f6109a5b5321f90e0.jpg',
    'https://pic.maizuo.com/usr/movie/94466a1c6da2c471390baa22b4e135e9.jpg',
    'https://pic.maizuo.com/usr/movie/13664183bd63199316ad936a21f01aa8.jpg',
    'https://pic.maizuo.com/usr/movie/5808630e84a85c6932b05b5e7772d4d3.jpg',
    'https://pic.maizuo.com/usr/movie/79c8798f522bd1ba02059ffe08deb6c4.jpg',
    'https://pic.maizuo.com/usr/movie/8122ae59b87762e67ee19ee9f95b1444.jpg',
    'https://pic.maizuo.com/usr/movie/f2df23db1775c2ac34c7c0bc58710382.jpg',
    'https://pic.maizuo.com/usr/movie/3bb18d32ace829e44020fe69234d122c.jpg',
    ]
    }
    }
    }
    </script>

    <style lang="scss" scoped>
    img {
    100%;
    height: 150px;
    }
    </style>
    讨论群:249728408
  • 相关阅读:
    添加或删除项并动态记录项的值
    练习题。对DOM中document的深刻理解巩固
    document--文档中的操作,操作属性、操作样式、操作元素
    10.13DOM中document--文档1找到元素的方法,还有元素内容属性
    函数的定义,语法,二维数组,几个练习题
    10.11讲的内容总结
    js基础巩固练习
    10.9做的一个静态页面(巩固前面的内容)
    9.29学习的js基础
    9.28做的作业(企业名称静态网页)
  • 原文地址:https://www.cnblogs.com/zhongyehai/p/13514855.html
Copyright © 2011-2022 走看看