Zepto的学习（3）移动端小案例的演练

这里参考尚硅谷的一个小实战演练，主要用到了css3，Zepto等等，还不错。
这里是链接：提取码：2zy8
效果可以实现移动端的各个翻页情况：

$(function () {
  //初始化数据
  var direction = {
    up: 1,
    right: 2,
    down: 3,
    left: 4
  }
  //初始化两个坐标
  var now = {
    col: 1,//纵向坐标
    row: 1 //横向坐标
  }
  var last = {
    col: 0,//纵向坐标
    row: 0 //横向坐标
  }

  //初始化变量，表示页面没有在滑动
  var isMoving = false

  //向上滑动
  $('.page').swipeUp(function () {
    //判断是否滑动
    if(isMoving){
      return
    }

    last.col = now.col
    last.row = now.row
    if(last.col < 5){
      //计算滑动之后进场也页面的坐标
      now.col = last.col + 1
      now.row = last.row
      movePage(direction.up)
    }
  })
  //向下滑动
  $('.page').swipeDown(function () {
    if(isMoving){
      return
    }
    last.col = now.col
    last.row = now.row
    if(last.col > 1){
      //计算滑动之后进场也页面的坐标
      now.col = last.col - 1
      now.row = last.row
      movePage(direction.down)
    }
  })
  //向左滑动

  $('.page').swipeLeft(function () {
    if(isMoving){
      return
    }
    last.col = now.col
    last.row = now.row
    if(last.col > 1 && last.col < 5 && last.row ==1){
      //计算滑动之后进场也页面的坐标
      now.col = last.col
      now.row = last.row + 1
      movePage(direction.left)
    }
  })
  //向右滑动
  $('.page').swipeRight(function () {
    if(isMoving){
      return
    }
    last.col = now.col
    last.row = now.row
    if(last.col > 1 && last.col < 5 && last.row ==2){
      //计算滑动之后进场也页面的坐标
      now.col = last.col
      now.row = last.row  - 1
      movePage(direction.right)
    }
  })

  //定义一个滑动的功能函数
  function movePage(dir) {
    //初始化参与动画的页面
    var lastPage = '.page-' + last.col + '-' + last.row;
    var nowPage = '.page-' + now.col + '-' + now.row
    //初始化两个动画类
    var inClass = '';//进场动画类
    var outClass = '';//出场动画类
    //去判断是向哪划
    switch(dir){
      case direction.up:
        outClass = 'pt-page-moveToTop'
        inClass = 'pt-page-moveFromBottom'
        break
      case direction.right:
        outClass = 'pt-page-moveToRight'
        inClass = 'pt-page-moveFromLeft'
        break
      case direction.down:
        outClass = 'pt-page-moveToBottom'
        inClass = 'pt-page-moveFromTop'
        break
      case direction.left:
        outClass = 'pt-page-moveToLeft'
        inClass = 'pt-page-moveFromRight'
        break
    }

    //将动画加到参与动画的页面上
    //这里我想了下，3个步骤，
    //我觉得是首先呢，页面都是绝对定位定在一起的，也就是重叠在一起的
    //所以首先我们将当前页面移上去，也就相当于把所有的页面移上去了，我们就看不见了
    // 然后取消他重叠第二个界面的hide，把他显示出来
    // 然后再把第二个页面移下来，就这样循环，默认从第一个页面开始，
    //在以往都学习中，大部分采用的都是隐藏，增加隐藏，删除隐藏，这次不一样，
    //我想了下，增加隐藏什么的对于这种叠加的很多的好像不是很好用，会有点麻烦

    //这是我第一次的想法，实现了向上滑，后来向下滑我疑惑了，上面的想法好像不行啊
    //经过我反复思考，我出来了。。。其实一开始我就有一个误区，这要去animation.css
    // 去看，这里的动画是从一个位置，到一个位置，我忽略了这个问题，我以为是一起移动
    // 其实是分开的，就像前面做小的动画效果一样，都是从四周开始进入视口
    //引以为戒！
    $(lastPage).addClass(outClass);
    $(nowPage).removeClass('hide');
    $(nowPage).addClass(inClass);
    isMoving = true;

    //动画执行完，清除动画类/扫尾工作
    //因为是600秒就进入完成了嘛，在animation里设的动画化执行时间
    //不移除就会导致动画效果始终在这个上面
    setTimeout(function () {
      //这里我想到了，当效果执行结束了，移除了outClass和inClass会导致什么？
      //会导致此时没有了动画效果，那它是不是就要回到原来的位置了,我用div实验了一下
      //和我想的一样，动画移除了就会回到原来位置，可以去看下面的y.html
      $(lastPage).addClass('hide');
      $(lastPage).removeClass(outClass);
      //通过隐藏的方式，当进来了，再加在界面中的动画，
      // 不写的话，就会导致动画和页面同时进行的状况
      $(lastPage).find('img').addClass('hide');
      $(nowPage).removeClass(inClass);
      $(nowPage).find('img').removeClass('hide');
      //翻完了还得设回去fasle，要不一直为true
      isMoving = false;
    },600)
  }
})

来源：CSDN

作者：写bug的小气球

链接：https://blog.csdn.net/weixin_46013619/article/details/103754564