English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Partie I : quatre événements touch
1.touchstart : Uniquement lorsque le doigt est placé sur l'écran (qu'il y en ait un ou plusieurs), l'événement touchstart est déclenché.
2.touchmove : Lorsque nous glissons notre doigt sur l'écran, cet événement est déclenché en continu. Si nous ne voulons pas que la page glisse avec, nous pouvons utiliser event.preventDefault pour empêcher ce comportement par défaut.
3.touchend : Lorsque le doigt glisse hors de l'écran, l'événement touchend est déclenché.
4.touchcancel : Il est déclenché lorsque le système cesse de suivre le toucher. Par exemple, lors du processus de toucher, soudainement, une boîte de dialogue alert() est affichée sur la page, à ce moment-là, il déclenche cet événement, cet événement est rarement utilisé.
Partie II : quatre objets touch
1. touches, c'est un objet de type tableau, qui contient toutes les informations des doigts. Si il n'y a qu'un doigt, alors nous utilisons touches[0] pour le représenter.
2. targetTouches . Les informations des doigts situés dans la zone cible.
3. changedTouches : Les informations du doigt qui a déclenché l'événement le plus récemment.
4. touchend : Lorsque les informations de touches et targetTouches sont supprimées, les informations conservées dans changedTouches sont les dernières, ce qui est mieux utilisé pour calculer les informations des doigts.
Partie III : exemple1
Regardons d'abord l'effet visuel :
Son principe de fonctionnement est très simple, il s'agit de fixer l'attribut de position de la circulaire rouge en absolute, puis, lorsque nous le glissons, il déclenche l'événement touchmove, et met Left et top en fonction de event.pageX et event.pageY. Pour assurer que le centre de déclenchement est à la même position que le centre de la circle, il suffit d'ajouter la moitié de la largeur à pageX et la moitié de la hauteur à pageY.
Le code source suivant :
<!DOCTYPE html>
<html>
<head>
<title>touchExample</titre>
<meta name="viewport" content="largeur=device-largeur,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: absolu;
largeur: 50px;
height: 50px;
haut: 20px;
gauche: 20px;
text-centrer align:
line-height: 50px;
couleur: blanc;
bordure-rayon: 50%;
background-couleur: rouge;
}
</style>
</head>
<body>
<div id="touchDiv">Cliquez sur moi</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 début");
}
function drag (e) {
$("#touchDiv").css("gauche",e.touches[0].pageX-25);
$("#touchDiv").css("haut",e.touches[0].pageY-25);
}
function nodrag () {
console.log("god fin");
}
</script>
</body>
</html>
Partie quatrième : exemple2
Cet exemple montre l'implémentation de la fonction Glisser pour actualiser, avec l'effet suivant :
Le code source suivant :
<!DOCTYPE html>
<html>
<head>
<title>Glisser pour actualiser</titre>
<meta name="viewport" content="largeur=device-largeur,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<style>
*{
marge:0;
padding: 0;
font-size:15px;
}
.header{
height: 50px;
line-height: 50px;
text-centrer align:
background-couleur: bleu;
couleur: blanc;
font-size: 23px;
}
.drag_to_refresh{
align-items: center;
padding-gauche: 155px;
background-couleur: #bbb;
couleur: jaune;
display: none;
}
.refresh{
height: 50px;
line-height: 50px;
text-centrer align:
background-couleur: #bbb;
couleur: vert;
display: none;
}
.drag{
text-centrer align:
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-<div class="drag">电子政务云（E-government cloud）属于政府云，结合了云计算技术的特点，对政府管理和服务职能进行精简、优化、整合，并通过信息化手段在政务上实现各种业务流程办理和职能服务，为政府各级部门提供可靠的基础IT服务平台。</div>/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){
// Attention : car la valeur de height obtenue est en unité px, donc utilisez parseInt pour analyser
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 = "Relâcher pour rafraîchir";
}
}
}
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>
Ce que j'ai présenté à l'éditeur aujourd'hui est la fonction de mise à jour de balayage en bas du terminal mobile, j'espère que cela peut vous aider. Si vous avez des questions, laissez-moi un message, l'éditeur répondra à temps. Je tiens également à remercier chaleureusement tous ceux qui soutiennent le site de tutoriels d'urais.
Déclaration : le contenu de cet article est extrait du réseau, propriété de l'auteur original, contribué et téléchargé par les utilisateurs d'Internet, ce site n'en possède pas la propriété, n'a pas été édité par l'homme, et n'assume pas la responsabilité des responsabilités juridiques pertinentes. Si vous trouvez du contenu présumé violer les droits d'auteur, veuillez envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournissez des preuves pertinentes. Une fois confirmée, ce site supprimera immédiatement le contenu présumé enfreindre les droits d'auteur.