vue单文件组件工程，上下全屏翻页小案例

时间：2017-10-14 16:46:37 阅读：259 评论：0 收藏：0 [点我收藏+]

标签：函数 get hid 必须 end no-repeat vue ... 属性

转载请标明出处，以下纯手打，不容易~~~

先来看下效果图吧，百度发现一款录屏制作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>