android-cloud-H5/microserviceUserH5/static/js/vender/move.js

var sliderData = (function(cb){
  document.getElementById('slider').addEventListener('touchstart',touchstart, false);
  document.getElementById('slider').addEventListener('touchmove',touchmove, false);
  document.getElementById('slider').addEventListener('touchend',touchend, false);
  var pageDom = document.getElementsByClassName('page')[0];
  var rightEarDom = document.getElementsByClassName('right-ear')[0];
  var leftEarDom = document.getElementsByClassName('left-ear')[0];
  var scheduleChildLine = document.getElementsByClassName('schedule-child-line')[0];
  
  var width = 651;
  var startX =0;
  var translateX = 0;
  var startTime;
  var newTranslateX;
  var distance = 0;
  var startTranslate;
  var isSlide = false;
  var slideing = false;
  var SlideNumber = 1;
  
  function touchstart(e){
    startX = e.touches[0].clientX;
    startTime = new Date().getTime();
    startTranslate = translateX;
    isSlide = true;
    SlideNumber++;
  }
  
  function touchmove(e){
    if (!isSlide || sliderNumber == 0) return
    var currentX = e.touches[0].clientX
    //2端溢出不能滑动
    if (startTranslate == 0 && currentX > startX) return;
    if (Math.abs(startTranslate) == width * (sliderNumber - 1) && currentX < startX) return;
  
    // 向右滑动时， 没数据无法滑动
    if (currentX < startX) {
  
    }
    distance = currentX - startX;
    translateX = currentX - startX + startTranslate;

    if (translateX > startTranslate && SlideNumber>2) {
      // 向左划
      if (distance > width / 3 || distance > 40) {
        newTranslateX = startTranslate + width;
      } else {
        newTranslateX = startTranslate
      }
      translateX = newTranslateX;
    } else if(SlideNumber>2) {
      // 向右划
      if (Math.abs(distance) > width / 3 || Math.abs(distance) > 40) {
        newTranslateX = startTranslate - width;
      } else {
        newTranslateX = startTranslate
      }
      translateX = newTranslateX;
    }
  
    document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)";
    slideing = true;
  }
  function touchend(){
    if (slideing && SlideNumber>2) return //正在滑动 又开始滑动
    if (!isSlide || sliderNumber == 0) return
    var duration = +new Date() - startTime
    if (translateX > startTranslate) {
      // 向左划
      if (distance > width / 3 || (distance > 40 && duration < 600)) {
        newTranslateX = startTranslate + width;
      } else {
        newTranslateX = startTranslate
      }
      if(pageNum == Math.abs(newTranslateX / width) + 1){
        pageNum = Math.abs(newTranslateX / width) //解决cb中pageNum不是最新的
        cb();
      }
    } else {
      // 向右划
      if (Math.abs(distance) > width / 3 || (Math.abs(distance) > 40 && duration < 600)) {
        newTranslateX = startTranslate - width;
      } else {
        newTranslateX = startTranslate
      }
      if(pageNum == Math.abs(newTranslateX / width) - 1){
        pageNum = Math.abs(newTranslateX / width) //解决cb中pageNum不是最新的
        cb();
      }
    }
    translateX = newTranslateX;
    isSlide = false;
    distance = 0;
    pageNum = Math.abs(newTranslateX / width)
    document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)"
    lineMove();
    slideing = false;
    SlideNumber = 1;
  }
  //点击左耳朵
  leftEarDom.addEventListener('click',() => {
    if (pageNum == 0) return;
    startTranslate = translateX;
    newTranslateX = startTranslate + width;
    translateX = newTranslateX;
    document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)"
    lineMove();
  })
	//点击右耳朵
  rightEarDom.addEventListener('click',() => {
    if (pageNum === sliderNumber - 1) return;
    startTranslate = translateX;
    newTranslateX = startTranslate - width;
    translateX = newTranslateX;
    document.getElementById("slider-list").style.transform = "translateX("+translateX/100+"rem)";
    lineMove();
    cb();
  })
  //下方进度条移动
  function lineMove(){
    pageNum = Math.abs(newTranslateX / width);
    let oneSlider = 36/sliderNumber,
        transformSlider = oneSlider*pageNum;
    scheduleChildLine.style.width = `${oneSlider}px`;
    scheduleChildLine.style.transform = `translateX(${transformSlider}px)`;
    pageDom.innerText = `${pageNum + 1}/${sliderNumber}页`
  }
})(getLists)