极客观点
项目管理
HarmonyOS
各位大侠好，我想问一下我在写页面切换的时候，发现在Chrome上面模拟安卓手机是好用的，会有页面切换的效果，但是到手机上就没有用了，手机chrome是可以的，原生的浏览器，微信浏览器都不能用。我加alert()，本来以为是事件touchstart、touchmove、touchend没触发，但这三个事件都可以有效果，而且translate3d的y值都有变化，就是没动画，求解。。
git链接：https://github.com/Emiya0306/WeChart-WebAppTemplete
<!DOCTYPE html>
<html>
<head>
<title>WebChat-WebAppTemplete</title>
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel='stylesheet' href='/stylesheets/wechat-H5.css' />
<script src='/javascripts/wechat-H5.js'></script>
</head>
<body>
<ul id='app'>
<li>
<h1>Page1</h1>
<p>test1</p>
<button onClick="webchat.movePage(3);">test</button>
</li>
<li>
<h1>Page2</h1>
<p>test2</p>
</li>
<li>
<h1>Page3</h1>
<p>test3</p>
</li>
<li>
<h1>Page4</h1>
<p>test4</p>
</li>
</ul>
<script>
var myApp = document.getElementById('app');
var webchat = new webchat(myApp, document.body.clientHeight, document.body.clientWidth);
</script>
</body>
</html>
写的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();
};
恩，找到问题了，是我安卓手机不支持translate3d动画效果。