English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Первая часть: четыре события touch
1. touchstart: при условии, что палец был placed на экране (независимо от того, несколько ли их), срабатывает событие touchstart.
2. touchmove: когда мы скроллим экран пальцем, это событие срабатывает постоянно. Если мы не хотим, чтобы страница скользила, мы можем использовать event.preventDefault, чтобы предотвратить это поведение по умолчанию.
3. touchend: когда палец скользит по экрану и выходит из экрана, в этом случае срабатывает событие touchend.
4. touchcancel: срабатывает, когда система останавливает отслеживание касания. Например, если во время касания suddenly страница alert() появляется окно с сообщением, в этом случае срабатывает это событие, это событие используется редко.
Вторая часть: четыре объекта touch
1. touches: это объект типа массива, который содержит информацию о всех пальцах, если один палец, то мы используем touches[0].
2. targetTouches: информация о пальцах, находящихся в целевой области.
3. changedTouches: информация о пальце, который последним сработал на этом событии.
4. touchend: при завершении срабатывания touchend информация о touches и targetTouches удаляется, changedTouches сохраняет последнюю информацию, которая лучше всего подходит для вычисления информации о пальце.
Третья часть: пример 1
Сначала посмотрим на效果图:
Его принцип реализации очень прост: просто установите атрибут position красного круга в absolute, затем, когда мы скроллим его, срабатывает событие touchmove, и мы устанавливаем Left и top в pageX и pageY события, чтобы обеспечить, чтобы точка срабатывания и центр круга находились в одном и том же месте, достаточно добавить pageX наполовину ширины и pageY наполовину высоты.
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>touchExample</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<style>
#touchDiv{
position: absolute;
width: 50px;
height: 50px;
top: 20px;
left: 20px;
text-align: center;
line-height: 50px;
color:white;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="touchDiv">нажми меня</div>
<script>
var touchDiv = document.getElementById("touchDiv");
var x,y;
touchDiv.addEventListener("touchstart",canDrag);
touchDiv.addEventListener("touchmove",drag);
touchDiv.addEventListener("touchend",nodrag);
function canDrag (e) {
console.log("god开始");
}
function drag (e) {
$("#touchDiv").css("left",e.touches[0].pageX-25);
$("#touchDiv").css("top",e.touches[0].pageY-25);
}
function nodrag () {
console.log("god结束");
}
</script>
</body>
</html>
第四部分：实例2
这个实例就是下拉刷新功能的实现，效果如下：
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>下拉刷新</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<style>
*{
margin:0;
padding: 0;
font-size:15px;
}
.header{
height: 50px;
line-height: 50px;
text-align: center;
background-color: blue;
color:white;
font-size: 23px;
}
.drag_to_refresh{
align-items: center;
padding-left: 155px;
background-color: #bbb;
color:yellow;
display: none;
}
.refresh{
height: 50px;
line-height: 50px;
text-align: center;
background-color: #bbb;
color: green;
display: none;
}
.drag{
text-align: center;
background-color: lightgray;
position: relative;
padding:20px;
text-indent: 1em;
line-height: 30px;
font-size:18px;
}
</style>
</head>
<body>
<div class="header">Облако правительства</div>
<div class="drag_to_refresh"></div>
<div class="refresh">Обновление...</div>
<div class="drag">Электронное правительство облако (E-government cloud) относится к правительственному облаку, интегрирует характеристики облачных вычислений, оптимизирует, интегрирует и упрощает функции управления и обслуживания правительства, и реализует различные бизнес-процессы и функции обслуживания через информационные средства в правительстве, предоставляя надежную основную платформу IT-услуг для всех уровней правительственных органов.</div>
<script>
window.onload = function () {
var initX;
var drag_content = document.querySelector(".drag");
var drag_to_refresh = document.querySelector(".drag_to_refresh");
var refresh = document.querySelector(".refresh");
drag_content.addEventListener("touchmove",drag);
drag_content.addEventListener("touchstart",dragStart);
drag_content.addEventListener("touchend",dragEnd);
function dragStart(e){
initY = e.touches[0].pageY;
console.log(initX);
}
function drag (e){
drag_to_refresh.style.display = "block";
drag_to_refresh.style.height = (e.touches[0].pageY - initY) + "px";
console.log(drag_to_refresh.style.height);
if(parseInt(drag_to_refresh.style.height)>=100){
// Обратите внимание: поскольку значение height получено в единицах px, его необходимо преобразовать с помощью parseInt
drag_to_refresh.style.height = "100px";
if(parseInt(drag_to_refresh.style.height)>80){
drag_to_refresh.style.lineHeight = drag_to_refresh.style.height;
drag_to_refresh.innerHTML = "Отпустите для обновления";
}
}
}
function dragEnd (e){
if(parseInt(drag_to_refresh.style.height)>80){
refresh.style.display = "block";
setTimeout(reload,1000);
}
drag_to_refresh.style.display = "none";
}
function reload () {
location.reload();
}
}
</script>
</body>
</html>
Как所述，редактор介绍了给大家移动端touch实现下拉刷新功能，希望对大家有所帮助。如果大家有任何疑问，请给我留言，编辑会及时回复大家的。在此也非常感谢大家对呐喊教程网站的支持！
Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, загружен самостоятельно, сайт не обладает правами собственности, не undergone人工编辑处理, nor assumes any relevant legal liability. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма, пожалуйста, замените # на @) для сообщения о нарушении, и предоставьте соответствующие доказательства. При подтверждении, сайт немедленно удаляет涉嫌侵权的内容。