美文网首页
07.项目吸顶效果

07.项目吸顶效果

作者: 小二的学习日记 | 来源:发表于2020-07-06 17:09 被阅读0次

    做一个Header切换组件,并实现吸顶效果

    1.先做一个Header组件

    //===>src/views/Film/FilmHeader.vue
    <template>
      <div>
        <ul>
          <router-link to="/film/nowplaying" tag="li" activeClass="active">正在热映</router-link>
          <router-link to="/film/comingsoon" tag="li" activeClass="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: 2px solid red;
    }
    </style>
    

    2.在Film页面导入FilmHeader

    //===>src/views/Film.vue
    <template>
      <div>
        <swiper :key="looplist.length">
          <div class="swiper-slide" v-for="data in looplist" :key="data">
            <img :src="data" />
          </div>
        </swiper>
        <filmheader></filmheader>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    import swiper from "@/views/Film/Swiper";
    import filmheader from "@/views/Film/FilmHeader";
    import axios from "axios";
    export default {
      data() {
        ...
      },
      components: {
        swiper,
        filmheader
      },
      mounted() {
        ...
      }
    };
    </script>
    ...
    
    效果
    现在,我们想实现顶部悬停效果,即上拉页面时,FilmHeader组件滑到顶部会停在那里
    3.修改Film页面,通过window.onscroll获取FilmHeader的滚动位置,使用:class语法动态控制悬停属性
    //===>src/views/Film.vue
    <template>
      <div>
        <swiper :key="looplist.length" ref="myswiper">
          <div class="swiper-slide" v-for="data in looplist" :key="data">
            <img :src="data" />
          </div>
        </swiper>
        <filmheader :class="isFix?'fixed':''"></filmheader>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    import swiper from "@/views/Film/Swiper";
    import filmheader from "@/views/Film/FilmHeader";
    import axios from "axios";
    export default {
      data() {
        return {
          looplist: [],
          isFix: false
        };
      },
      components: {
        swiper,
        filmheader
      },
      mounted() {
        axios({
          url: "https://m.maizuo.com/gateway?filmId=4837&k=9593174",
          headers: {
            "X-Client-Info":
              '{"a":"3000","ch":"1002","v":"5.0.4","e":"159065562332628866547713"}',
            "X-Host": "mall.film-ticket.film.info"
          }
        }).then(res => {
          console.log(res.data);
          this.looplist = res.data.data.film.photos;
        });
        window.onscroll = this.handleScroll;
      },
      methods: {
        handleScroll() {
          if (
            document.documentElement.scrollTop >=
            this.$refs.myswiper.$el.offsetHeight
          ) {
            this.isFix = true;
          } else {
            this.isFix = false;
          }
        }
      }
    };
    </script>
    
    <style lang="sass" scoped>
    
    </style>
    

    4.在FilmHeader文件中,编写fixed悬停的属性

    //===>src/views/Film/FilmHeader.vue
    <template>
     ...
    </template>
    <style lang="scss" scoped>
    ...
    .fixed {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 40px;
      background: white;
    }
    </style>
    

    至此悬停功能完成了。


    效果

    疫情期间,电影院电影太少,以至于我不能上拉页面去测试悬停效果,所以,我把复制一点假数据模拟一下。
    5*.修改Nowplaying.vue组件,向datalist添加模拟数据

    //===>src/views/Film/Nowplaying.vue
    <template>
     ...
    </template>
    
    <script>
    ...
    export default {
      data() {
        return {
          datalist: []
        };
      },
      mounted() {
      ...
        axios({
         ...
        }).then(res => {
          console.log(res.data);
          this.datalist = res.data.data.films;
          console.log(...this.datalist);
    
          this.datalist = [
            ...this.datalist,
            ...this.datalist,
            ...this.datalist,
            ...this.datalist,
            ...this.datalist
          ];
        });
      },
     ...
    </script>
    <style lang="scss" scoped>
    ...
    </style>
    
    效果实现了
    因为报错了,我们测试看到效果,就可以把刚添加的重复数据删掉了

    相关文章

      网友评论

          本文标题:07.项目吸顶效果

          本文链接:https://www.haomeiwen.com/subject/slwwqktx.html