各位大侠好，我想问一下我在写页面切换的时候，发现在Chrome上面模拟安卓手机是好用的，会有页面切换的效果，但是到手机上就没有用了，手机chrome是可以的，原生的浏览器，微信浏览器都不能用。我加alert()，本来以为是事件touchstart、touchmove、touchend没触发，但这三个事件都可以有效果，而且translate3d的y值都有变化，就是没动画，求解。。

git链接：https://github.com/Emiya0306/WeChart-WebAppTemplete

  
    
    
    
    
    
    
  
  
    

      

        
Page1
        
test1
        test
      
      

        
Page2
        
test2
      
      

        
Page3
        
test3
      
      

        
Page4
        
test4
      
    
    
  

写的CSS代码如下：
html * {
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body ul {
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.2s ease-out;
}

body ul > li {
  position: relative;
  display: block;
  list-style-type: none;
}

写的js代码如下：
function webchat (app, height, width) {
  this.target = app;
  this.height = height;
  this.width = width;
  this.page = 0;
  this.init();
}

webchat.prototype.resizePage = function () {
  for (var i = 0; i < this.target.children.length; i++) {
    this.target.children[i].style.width = this.width + 'px';
    this.target.children[i].style.height = this.height + 'px';
  }
  this.bindTouchEvent(this.target);
};

webchat.prototype.bindTouchEvent = function (target) {
  target.addEventListener('touchstart', this.startHandler);
  target.addEventListener('touchmove', this.moveHandler);
  target.addEventListener('touchend', this.endHandler);
};

webchat.prototype.init = function () {
  this.resizePage();
};

webchat.prototype.movePage = function (index) {
  this.page = index;
  this.target.style.transform = 'translate3d(0, ' + (webchat.page * (-webchat.height)) + 'px' + ', 0)';
};

webchat.prototype.startHandler = function (event) {
  this.startTime = Date.now();
  this.startX = event.touches[0].clientX;
  this.startY = event.touches[0].clientY;
};

webchat.prototype.moveHandler = function (event) {
  event.preventDefault();
  this.moveTime = Date.now();
  this.moveX = event.touches[0].clientX - this.startX;
  this.moveY = event.touches[0].clientY - this.startY;
  this.style.transform = 'translate3d(0, ' + (webchat.page * (-webchat.height) + this.moveY) + 'px' + ', 0)';
};

webchat.prototype.endHandler = function (event) {
  event.preventDefault();
  if (this.moveY > 150 && webchat.page > 0) {
    webchat.page --;
    alert('page--: ' + webchat.page)
  } else if (this.moveY < -150 && webchat.page < webchat.target.children.length - 1) {
    webchat.page ++;
    alert('page++: ' + webchat.page)
  }
  this.style.transform = 'translate3d(0, ' + (webchat.page * (-webchat.height)) + 'px' + ', 0)';
  alert(this.style.transform)
  this.endTime = Date.now();
};