js h5滑动翻页

记得之前fullpage.js在iphoneX上好像有个bug(最后一屏后面还有一屏空白)， 不知是否已经解决。
只实现一个翻页， 不想引用vue-fullpage.js了， 随手写下吧。

 

mounted(){
    let startX = 0, startY = 0, endX = 0, endY = 0;
    this.docHeight = document.documentElement.clientHeight || document.body.clientHeight;
    this.docWidth = document.documentElement.clientWidth || document.body.clientWidth;
    this.pageDom = this.$refs.operateMain;
    this.pageDom.style.marginTop = 0;

    this.pageDom.addEventListener('touchstart', evt =>{
      startX = Math.round(evt.changedTouches[0].clientX);
      startY = Math.round(evt.changedTouches[0].clientY);
    }, false) 

    this.pageDom.addEventListener('touchend', evt =>{
      endX = Math.round(evt.changedTouches[0].clientX);
      endY = Math.round(evt.changedTouches[0].clientY);
      if((Math.abs(endY - startY) > Math.abs(endX - startX)) && Math.abs(endY - startY) > 50){
          if(endY > startY){
           switch(this.activePage){
              case 2: this.activePage = 1; this.pageDom.style.marginTop = (-0) * this.docHeight + 'px'; break;
              case 3: this.activePage = 2; this.pageDom.style.marginTop = (-1) * this.docHeight + 'px'; break;
            } 
          }else{
            switch(this.activePage){
              case 1: this.activePage = 2; this.pageDom.style.marginTop = (-1) * this.docHeight + 'px'; break;
              case 2: this.activePage = 3; this.pageDom.style.marginTop =  (-2) * this.docHeight + 'px'; break;
            }
          }
      }
    }, false) 
  
    this.pageDom.style.marginTop = (1 - this.activePage) * this.docHeight + 'px';
  
  }

.operateMain{
    transition: margin-top .4s;
  }

控制.operateMain的marginTop来改变显示的范围
.operateMain和ref="operateMain"绑在同一个元素上，
div.operateMain内部是每一屏的div。activePage为当前激活页。


更改默认的左右滑动， 上下滑动都可以这样实现。