vue/cli的学习七 事件操作效果切换

正常显示 中间的导航正常显示  

下拉以后 滚动一段距离以后 吸顶效果

 

1页面滚动的事件写在mounted中  拉动的距离大于 轮播图的高度以后  吸顶效果  title显示

 mounted() {
    //处理dom操作和事件绑定
    window.onscroll = () => {
      //滚动的事件中得到滚动的距离
      let scrollTop = document.documentElement.scrollTop;

      let bannerHeigth = this.$refs.myswiper.$el.offsetHeight;
      if (scrollTop >= bannerHeigth) {
        this.titleFlag = true;
        this.navclass="nav1";
      } else {
        this.titleFlag = false;
        this.navclass="nav";
      }
    };
  },

2:数据处理地方

 

data() {
    return {
      navclass:"nav",
      titleFlag: false,
      com: "nowplaying",
      selectedIndex: 1,
      bannerList: [], //轮播图的数据
    };
  },

完成的页面代码如下

<template>
  <div class="home">
    <swiper ref="myswiper" :bannerlist="bannerList"></swiper>
    <div :class="navclass">
      <div class="nav-title" v-show="titleFlag">电影</div>
      <div class="nav-content">
        <div
          class="nav-item"
          :class="{ selected: selectedIndex == 1 }"
          @click="changeIndex(1)"
        >
          正在热映
        </div>
        <div
          class="nav-item"
          :class="{ selected: selectedIndex != 1 }"
          @click="changeIndex(2)"
        >
          即将上映
        </div>
      </div>
    </div>
    <div class="content">
      <component :is="com"></component>
    </div>
  </div>
</template>
<style scoped>
.nav {
  width: 100%;
  height: 80px;
}
.nav1{
   width: 100%;
   height: 80px;
   top:0;
   position: sticky;
   background-color: white;
}
.nav-title {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.nav-content {
  width: 100%;
  height: 40px;
  display: flex;
}
.nav-item {
  flex: 1;
  text-align: center;
  line-height: 40px;
}
.nav-item.selected {
  color: #ff5f16;
}
</style>
<script>
import axios from "axios";
import swiper from "../components/home/Swiper";
import comingsoon from "../components/home/ComingSoon";
import nowplaying from "../components/home/NowPlaying";
export default {
  data() {
    return {
      navclass:"nav",
      titleFlag: false,
      com: "nowplaying",
      selectedIndex: 1,
      bannerList: [], //轮播图的数据
    };
  },
  methods: {
    changeIndex(index) {
      this.selectedIndex = index;
      if (index == 1) {
        //千万别写=
        this.com = "nowplaying";
      } else {
        this.com = "comingsoon";
      }
    },
  },
  components: {
    swiper,
    comingsoon,
    nowplaying,
  },
  created() {
    axios({
      url: "http://192.168.61.174:6789/bannerlist",
    }).then((res) => {
      console.log(res.data);
      this.bannerList = res.data;
    });
  },
  mounted() {
    //处理dom操作和事件绑定
    window.onscroll = () => {
      //滚动的事件中得到滚动的距离
      let scrollTop = document.documentElement.scrollTop;

      let bannerHeigth = this.$refs.myswiper.$el.offsetHeight;
      if (scrollTop >= bannerHeigth) {
        this.titleFlag = true;
        this.navclass="nav1";
      } else {
        this.titleFlag = false;
        this.navclass="nav";
      }
    };
  },
};
</script>