轉載請標明出處，以下純手打，不容易~~~

先來看下效果圖吧，百度發現一款錄屏制作Gif的小工具，叫ScreentoGif ，終於可以上自己的動態效果圖了

接下來看下整個vue文件的完整代碼：

<template>
  <div class="box">
    <div class="page page1" @mousewheel="fn($event)" id="content">
      <div class="page page2">
        <div class="page page3"></div>
 

      </div>
    </div>
  </div>
</template>
<script>
  import $ from "jquery"
  export default{
    data() {
      return {
        startTime: 0,
        endTime: 0
      }
    },
    methods: {
      fn: function ($event) {
//        firefox使用detail:下3上-3,其他瀏覽器使用wheelDelta:下-120上120//下滾
 

        var $delta = -$event.wheelDelta || $event.detail;
        var $boxHeight = parseInt($(‘.box‘).css(‘height‘));
        var $contentTop = parseInt($(‘#content‘).css(‘top‘));
        if ($delta > 0 && $contentTop > -$boxHeight * 2 && (this.startTime == 0 || this.endTime - this
 
.startTime >= 500)) {
//          alert("下滾");
          this.startTime = new Date().getTime();
          $contentTop = $contentTop - $boxHeight;
          $(‘#content‘).animate({"top": $contentTop + "px"}, 500, ‘swing‘,() => {
            this.endTime = new Date().getTime();
//            alert(this.endTime - this.startTime);
          });


        }
        if ($delta < 0 && $contentTop < 0 &&(this.startTime == 0 || this.endTime - this.startTime >= 500)) {
//          alert("上滾");
          this.startTime = new Date().getTime();
          $contentTop = $contentTop + $boxHeight;
          $(‘#content‘).animate({"top": $contentTop + "px"}, 500,() => {
            this.endTime = new Date().getTime();
//            alert(this.endTime - this.startTime);
          })
        }
      }
    }
  }
</script>
<style>
  .box {
    position: absolute;
    width: 100%;
    overflow: hidden;
  }

  .page {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%
  }

  .page1 {
    top: 0;
    background: url(../assets/images/A.png) no-repeat top left;
    background-size: cover;
  }

  .page2 {
    top: 100%;
    background: url(../assets/images/B.png) no-repeat top left;
    background-size: cover;
  }

  .page3 {
    top: 100%;
    background: url(../assets/images/c.png) no-repeat top left;
    background-size: cover;
  }
</style>

下面看下重點部分

1.整體CSS布局的中的滿屏div采用了width：100%和height ：100% （註：以上代碼並未展示出所有的css），其中重點要說明一下div的height：100%要生效的前提是html和body標簽需同時設置height：100%

css代碼如下：

html, body, div {
  height: 100%;
}

其次，class=box這個div，也就是用來展示一整屏的div必須要是絕對定位, 只有這樣page1這個div的高度設置成height:100%才有效（因為page的div全部都是浮動的）

還有就是註意三個page1的嵌套方式，page1相對最外層額class=box的div定位，page2相對page1定位，page3相對page2定位，如果還有page則以此類推....

還有別忘了很重要的一點：class=box的div一定設置overflow:hidden的屬性,這樣一來瀏覽器的就不會出現上下滾動條

最後就布局出一個下面這樣的效果

2.關於鼠標滾動事件為mousewheel事件，firefox使用detail:下3上-3,其他瀏覽器使用wheelDelta:下-120上120

3.有一個bug需要處理：由於動畫是異步執行的，在動畫執行結束前，page1的top值還未到達最終的值，但用戶因為快速連續的滾動滾輪, 下圖中的判斷1和判斷2會判定為真，就會出現翻到不存在的頁面的情況

解決辦法就是增加下圖中的判斷3————動畫執行結束前，判斷3為假！也就是即使用戶瘋狂滾動滾輪，相應函數什麽也不做

轉載請標明出處，以上純手打，不容易~~~

vue單文件組件工程，上下全屏翻頁小案例