极客观点
项目管理
HarmonyOS
翻页的时候上下切换，来回切换几次就会停留在两个页面的中部，请问如何在每次切换后，确保加载一个完整的页面
index_phone.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>刘建_刘建简历_前端工程师简历_后端工程师简历_刘建技术负责人_找工作</title>
<meta name="keywords" content="web前端,abbott,web前端个人简历,前端开发简历网站,刘建的简历,前端工程师简历,web前端开发,web前端培训,web前端工程师,招聘,招聘网,人才网,求职,找工作">
<meta name="description" content="刘建前端简历,刘建后端简历">
<meta charset="UTF-8">
<meta name=App-Config content="fullscreen=yes,useHistoryState=yes,transition=yes">
<meta content=yes name=apple-mobile-web-app-capable>
<meta content=yes name=apple-touch-fullscreen>
<meta content="telephone=no,email=no" name=format-detection>
<meta name="applicable-device" content="mobile">
<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
<meta name="location" content="province=;city=;coord=">
<link type="text/css" rel="styleSheet" href="../../css/base.css" />
<link type="text/css" rel="styleSheet" href="assets/styles/job_phone_20210623.css" />
</head>
<body>
<div class="job-phone-root">
<div class="big-box" id="bigBox">
<div class="item item1">
<div class='resume-phone-introduction'>
<div class="resume-phone-background">
<img src="assets/images/resume_bg.png" />
</div>
<div class='resume-phone-text'>
<div class='resume-phone-logo-container'>
<img class='resume-phone-logo' src="assets/images/logo.png" />
</div>
<div class="number-one-container">
<img src="assets/images/number_one.png" />
</div>
<div class="resume-name-container">
刘建
</div>
<div class="resume-brief-introduction-container">
本人毕业于统招本科软件工程专业，曾经在腾讯工作过两年左右，具有三年多50人以上的团队管理经验，多次经历从0到1的产品研发过程，在github上参与过5千星以上项目。
</div>
<div class="btn-leave-message-container">
<img src="assets/images/button_leave_message.png" />
</div>
</div>
</div>
</div>
<div class="item item2"><h1>屏幕2</h1></div>
<div class="item item3"><h1>屏幕3</h1></div>
<div class="item item4"><h1>屏幕4</h1></div>
<div class="item item5"><h1>屏幕5</h1></div>
</div>
</div>
<script>
(function(a,e,f,g,b,c,d){a.ZhaoPinBigdataAnalyticsObject=b;a[b]=a[b]
||function(){(a[b].q=a[b].q||[]).push(arguments)};a[b].l=1*new Date;
a._ATAD_GIB_NIPOAHZ_||(c=e.createElement(f),d=e.getElementsByTagName(f)[0],
c.async=1,c.src=g,d.parentNode.insertBefore(c,d),a._ATAD_GIB_NIPOAHZ_=!0)})
(window,document,"script",document.location.protocol+
"//statistic.zhaopin.cn/sdk/zhaopin_tracker.js","za");
za("creat", "A23");
var basic = {
uid: '',
pagecode: '4013',
evtid: 'pageopen'
};
za('track', basic);
</script>
<script src="../../../assets/libraries/promptWindow/v1/promptWindow.js"></script>
<script src="assets/scripts/job_touch_20210619.js"></script>
<script src="assets/scripts/job_phone_20210619.js"></script>
<script>
function addLoad(func) {
var oldLoad = window.onload
if(typeof(oldLoad) !== 'function') {
window.onload = function () {
func();
}
} else {
window.onload = function () {
oldLoad();
func();
}
}
}
console.log(document.body.scrollHeight)
if(document.body.scrollHeight !== 0) {
// document.getElementById('bigBox').style.top = '0'
}
</script>
</body>
</html>job_touch_20210619.js
var bigBox = document.getElementById("bigBox");//获取bigBox节点对象
var lis = document.querySelectorAll(".controls li");//获取所有的li节点对象
var viewHeight = document.body.clientHeight;//获取当前页面高度
var flag = true;//设置开关
var index = 0;//设置索引
var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener)
element.addEventListener(type, handler, false);
else if (element.attachEvent)
element.attachEvent("on" + type, handler);
else
element["on" + type] = handler;
},
removeHandler: function (element, type, handler) {
if(element.removeEventListener)
element.removeEventListener(type, handler, false);
else if(element.detachEvent)
element.detachEvent("on" + type, handler);
else
element["on" + type] = handler;
},
/**
* 监听触摸的方向
* @param target 要绑定监听的目标元素
* @param isPreventDefault 是否屏蔽掉触摸滑动的默认行为（例如页面的上下滚动，缩放等）
* @param upCallback 向上滑动的监听回调（若不关心，可以不传，或传false）
* @param rightCallback 向右滑动的监听回调（若不关心，可以不传，或传false）
* @param downCallback 向下滑动的监听回调（若不关心，可以不传，或传false）
* @param leftCallback 向左滑动的监听回调（若不关心，可以不传，或传false）
*/
listenTouchDirection: function (target, isPreventDefault, upCallback, rightCallback, downCallback, leftCallback) {
this.addHandler(target, "touchstart", handleTouchEvent);
this.addHandler(target, "touchend", handleTouchEvent);
this.addHandler(target, "touchmove", handleTouchEvent);
var startX;
var startY;
function handleTouchEvent(event) {
switch (event.type){
case "touchstart":
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
break;
case "touchend":
var spanX = event.changedTouches[0].pageX - startX;
var spanY = event.changedTouches[0].pageY - startY;
//test
// console.log("startX:", startX);//[old] X
// console.log("startY:", startY);//[old] Y
// console.log("event.touches[0].pageX:", event.changedTouches[0].pageX);//[now] X
// console.log("event.touches[0].pageY:", event.changedTouches[0].pageY);//[now] Y
// console.log("spanX:", spanX);//[span] X
// console.log("spanY:", spanY);//[span] X
if(Math.abs(spanX) > Math.abs(spanY)){ //认定为水平方向滑动
if(spanX > 0){ //向右
if(rightCallback)
rightCallback();
} else if(spanX < -0){ //向左
if(leftCallback)
leftCallback();
}
} else { //认定为垂直方向滑动
if(spanY > 0){ //向下
if(downCallback)
downCallback();
} else if (spanY < -0) {//向上
if(upCallback)
upCallback();
}
}
break;
// case "touchmove":
// //阻止默认行为
// if(isPreventDefault)
// event.preventDefault();
// break;
}
}
}
};
function up(){
console.log("action:up");
bigBox.style.top = "0"
index++;
bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面
}
function down(){
console.log("action:down");
if(index !== 0) {
index--;
bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面
}
}
function left(){
console.log("action:left");
index++;
bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面
}
function right(){
console.log("action:right");
bigBox.style.top = "0"
index++;
bigBox.style.top = -index*viewHeight + "px";//bigBox整体上移index个页面
}
EventUtil.listenTouchDirection(document, true, up, right, down, left)job_phone_20210623.css
/* update: 2021/06/23 */
html{
display: block;
color: #000;
background: #fff;
overflow-y: scroll;
}
html {
font-size: 50px;
}
body {
margin:0;
display: block;
}
body, html {
height: 100%;
font-family: sans-serif;
}
ol,ul{
margin:0;
padding:0;
list-style:none
}
.van-ellipsis{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis
}
.prompt-message {
background: rgba(0, 0, 0, 0.7);
color: #FFFFFF;
/*height: 50px;*/
width: 80%;
position: absolute;
/*left: 50%;*/
/*margin-left: -40%;*/
/*top: 50%;*/
/*margin-top: 20px;*/
border-radius: 10px;
/*display: flex;*/
/*display: none;*/
justify-content: center;
align-items: center;
z-index: 999;
font-size: 0.4rem;
}
job-phone-root {
width: 100%;
height: 100%;
}
.big-box {
width: 100%;
height: 500%;
/*text-align:center;*/
position: absolute;
}
.big-box .item{
height: 20%;
width: 100%;
}
.resume-phone-introduction {
/*background: #2ecc71;*/
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
.resume-phone-background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.resume-phone-background img {
width: 100%;
height: 100%;
}
.resume-phone-text {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.resume-phone-logo-container {
/*width: 55px;*/
/*height: 30px;*/
width: 1.1rem;
height: 0.6rem;
overflow: hidden;
/*background: #0d3349;*/
margin-top: 1.2rem;
margin-left: 0.6rem;
}
.resume-phone-logo-container img {
display: block;
width: 100%;
height: 100%;
}
.number-one-container {
width: 125px;
height: 100px;
margin-left: 0.6rem;
margin-top: 3rem;
}
.number-one-container img {
display: block;
width: 100%;
height: 100%;
}
.resume-name-container {
/*background: #2ecc71;*/
font-size: 0.6rem;
/*width: 100px;*/
/*margin-left: 70px;*/
/*margin-top: 10px;*/
margin-left: 0.6rem;
/*margin-top: 0.2rem;*/
}
.resume-brief-introduction-container {
/*margin-top: 20px;*/
/*margin-left: 70px;*/
box-sizing: border-box;
margin-right: 0.6rem;
margin-left: 0.6rem;
margin-top: 0.6rem;
font-size: 0.4rem;
}
.btn-leave-message-container {
position: absolute;
right: 0;
bottom: 0;
width: 1.5rem;
height: 1.5rem;
overflow: hidden;
/*background: #2ecc71;*/
}
.btn-leave-message-container img {
display: block;
width: 100%;
height: 100%;
}
html5
CSS
scroll snap就解决了张鑫旭 大侠，请留步，要不过来了解下CSS Scroll Snap？