diapositive HTML à supprimer

Avec la popularité des appareils mobiles, de plus en plus de sites Web et d'applications commencent à se concentrer sur l'expérience utilisateur mobile. Parmi eux, glisser pour supprimer est devenu une méthode de fonctionnement courante. Cet article explique comment utiliser HTML et CSS pour implémenter la fonction de suppression coulissante.

1. Conception de la structure HTML

Tout d'abord, vous devez concevoir la liste qui doit implémenter la fonction de suppression coulissante en HTML, par exemple :

<ul>
  <li>
    <div class="item-content">
      <div class="item-title">列表标题</div>
      <div class="item-delete">
        <button>删除</button>
      </div>
    </div>
  </li>
</ul>

Parmi eux, le contenu de l'élément est le contenu principal de l'élément de liste , et la suppression d'un élément se produit lorsque vous faites glisser pour supprimer le bouton Supprimer à afficher. Il convient de noter que les deux éléments item-content et item-delete doivent être définis sur une largeur fixe afin que l'intégralité du contenu puisse être affichée lors du glissement.

2. Conception de style CSS

Ensuite, vous devez utiliser des styles CSS pour concevoir les éléments de la liste, notamment en définissant la position, la hauteur, la largeur et d'autres attributs de chaque élément de la liste, ainsi qu'en définissant les styles du bouton de suppression coulissant. Vous pouvez utiliser le code suivant pour y parvenir :

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  position: relative;
  height: 50px;
  line-height: 50px;
  background: #f0f0f0;
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid #dcdcdc;
}

.item-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 60px 0 15px;
}

.item-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 60px;
  padding-right: 15px;
  background: #f44336;
  color: #fff;
  text-align: center;
}

.item-delete button {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

Le code ci-dessus définit des styles de base tels que la hauteur fixe, la bordure et la couleur d'arrière-plan pour les éléments de la liste, et définit le positionnement absolu pour les deux éléments item-content et item-delete. Parmi eux, le remplissage droit du contenu de l'élément est défini sur 60 px, tandis que la largeur de la suppression de l'élément est définie sur 60 px et un espace de 15 px est laissé sur le côté droit du bouton de suppression.

3. JavaScript pour implémenter la suppression glissante

Enfin, le code JavaScript doit être utilisé pour implémenter la fonction de suppression glissante. Plus précisément, les aspects suivants doivent être pris en compte :

• Écoutez les événements touchstart, touchmove, touchend, obtenez les coordonnées du point tactile sur l'écran à l'aide de event.touches et calculez le déplacement horizontal du point tactile.
• Utilisez l'attribut de transformation pour obtenir un effet de glissement.
• Déterminez si le bouton de suppression doit être affiché en fonction de la distance de glissement et implémentez la fonction de suppression à la fin du toucher.

Voici le code d'implémentation spécifique :

var startX, moveX, delWidth = 60;
var list = document.getElementsByTagName('li');

for (var i = 0; i < list.length; i++) {
  list[i]._index = i;

  list[i].addEventListener('touchstart', function(event) {
    startX = event.touches[0].clientX;
    moveX = 0;
  });

  list[i].addEventListener('touchmove', function(event) {
    moveX = event.touches[0].clientX - startX;
    if (moveX > 0) {
      this.style.transform = 'translateX(' + moveX + 'px)';
    }
  });

  list[i].addEventListener('touchend', function(event) {
    if (moveX > delWidth / 2) {
      this.style.transform = 'translateX(' + delWidth + 'px)';
      this.querySelector('.item-delete').addEventListener('click', function(event) {
        var index = event.currentTarget.parentNode.parentNode._index;
        console.log('delete item: ' + index);
        // TODO 实现删除操作
      });
    } else {
      this.style.transform = 'translateX(0px)';
    }
  });
}

Dans le code ci-dessus, chaque élément de la liste est d'abord surveillé séparément pour les événements touchstart, touchmove et touchend, et le montant de la traduction est calculé en fonction du point de contact et de la distance de glissement, et la transformation est utilisée pour obtenir l'effet de glissement.

Dans l'événement touchend, si la distance de glissement dépasse un certain seuil, l'élément de liste sera déplacé vers la position deleteWidth et un événement click sera ajouté au bouton de suppression pour implémenter l'opération de suppression.

À ce stade, la mise en œuvre de la fonction de suppression coulissante est terminée. Vous pouvez utiliser les méthodes ci-dessus pour implémenter facilement l'effet de suppression coulissante en HTML et CSS, optimiser l'expérience utilisateur des applications mobiles et des sites Web et améliorer la satisfaction des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!