전체 화면 + 아래쪽 단일 페이지 스크롤

4890 단어 cssvue



import vFooter from "./../../components/footer.vue";
import vErwei from "./erwei.vue";
export default {
  components: {
    vErwei,
    vFooter
  },
  data() {
    return {
      fullpage: {
        current: 1,
        isScrolling: false,
        deltaY: 0
      }
    };
  },
  mounted() {
    console.log(0);
    this.$parent.$refs.vheader.isFixed = true;
    this.$parent.$refs.vfootexr.footerVis(true);
  },
  methods: {
    next() {
      let len = 3;
      if (this.fullpage.current + 1 <= len) {
        this.fullpage.current += 1;
        this.move(this.fullpage.current);
      }
    },
    pre() {
      if (this.fullpage.current - 1 > 0) {
        this.fullpage.current -= 1;
        this.move(this.fullpage.current);
      }
    },
    move(index) {
      this.fullpage.isScrolling = true;

      this.directToMove(index);
      setTimeout(() => {
        this.fullpage.isScrolling = false;
      }, 1010);
    },
    directToMove(index) {
        
        let height = this.$refs["fullPage"].clientHeight;
        let scrollPage = this.$refs["fullPageContainer"];
        // console.log(this.$refs["vf"]);
        // let footheight = this.$refs["vf"].clientHeight;
        // console.log(footheight);
        let scrollHeight;
        scrollHeight = -(index - 1) * height + "px";
      if (index == 3) {
        scrollHeight =  -1 * height -222 + "px";
      } else {
      }

      scrollPage.style.transform = `translateY(${scrollHeight})`;
    //   window.scrollTo({
    //     top: scrollHeight,
    //     behavior: "smooth"
    //   });
      this.fullpage.current = index;
    },
    mouseWheelHandle(event) {
      let evt = event || window.event;
      if (evt.stopPropagation) {
        evt.stopPropagation();
      } else {
        evt.returnValue = false;
      }
      if (this.fullpage.isScrolling) {
        return false;
      }
      let e = event.originalEvent || event;

      this.fullpage.deltaY = e.deltaY || e.detail;
      if (this.fullpage.deltaY > 0) {
        // this.$parent.$refs.vfooter.footerVis(false);
        this.next();
      } else if (this.fullpage.deltaY < 0) {
        // this.$parent.$refs.vfooter.footerVis(true);
        this.pre();
      }
    }
  }
};


```

좋은 웹페이지 즐겨찾기