Comment implémenter le défilement des pages vers la gauche et la droite dans Uniapp

Avec le développement continu de la technologie Internet mobile, la technologie frontale moderne est devenue de plus en plus colorée et les concepteurs UI/UX ont également commencé à mettre en avant des exigences plus élevées pour la présentation des effets de page. Parmi eux, l'effet de défilement vers la gauche et la droite est largement utilisé dans une variété de scénarios. Cet article explique comment utiliser Uniapp pour obtenir l'effet de défilement gauche et droit de la page.

1. Présentation d'uniapp

Uniapp encapsule le framework vue.js dans un centre de développement, ce qui peut être très pratique pour le développement multiplateforme, y compris, mais sans s'y limiter, les applets WeChat, les applications, H5, etc. Comparé à d'autres frameworks multiplateformes, uniapp est léger, facile à utiliser et prend en charge les plug-ins.

2. Idées d'implémentation

La manière courante d'obtenir l'effet de défilement vers la gauche et la droite de la page dans uniapp est d'introduire le plug-in de meilleur défilement. better-scroll est un composant iscroll puissant et flexible, qui peut aider les développeurs à obtenir divers effets de défilement du côté mobile. Ici, nous utilisons le plug-in better-scroll pour obtenir l'effet de défilement gauche et droit d'uniapp, qui est divisé en les étapes suivantes :

1. Téléchargez le plug-in better-scroll et introduisez-le dans le projet uniapp

Installez le plug-in better-scroll dans le répertoire racine du projet :

npm install better-scroll --save

Introduisez-le et instancier-le dans la page que vous devez utiliser :

import BScroll from 'better-scroll'

export default {
  data() {
    return {
      scroll: null
    }
  },
  mounted() {
    this.scroll = new BScroll(this.$refs.wrapper)
  }
}

où this.$refs.wrapper est l'élément DOM où se trouve la zone de défilement.

2. Implémentez les zones de défilement gauche et droite

Implémentez la structure HTML des zones de défilement gauche et droite dans la page, par exemple :

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </div>
</template>

où le wrapper est le conteneur de zone de défilement requis par le plug-in better-scroll, et content est le contenu de la zone de défilement. item est chaque élément enfant défilant.

3. Obtenez des effets de défilement vers la gauche et la droite

Obtenez des effets de défilement vers la gauche et la droite dans le style, par exemple :

<style>
  .wrapper {
    width: 100%;
    height: 200px;
    overflow: hidden;
  }

  .content {
    width: 100%;
    height: 200px;
    display: flex;
  }

  .item {
    flex: 0 0 120px;
    height: 200px;
    margin-right: 10px;
    background-color: #eee;
  }
</style>

Parmi eux, le wrapper doit définir la largeur et la hauteur, et définir le débordement sur caché pour masquer le contenu au-delà de la zone. Le contenu doit définir la largeur et la hauteur, et les éléments enfants doivent avoir une certaine largeur et hauteur. L'élément est chaque sous-élément défilable, et il est nécessaire de définir l'attribut flex pour obtenir un espacement et une largeur égales.

4. Ajouter une surveillance des événements de défilement

Ajouter une surveillance des événements de défilement dans la fonction Mounted() :

mounted() {
  this.scroll = new BScroll(this.$refs.wrapper)

  this.scroll.on('scroll', (pos) => {
    console.log(pos.x, pos.y)
  })
}

où pos.x et pos.y sont les décalages de la zone de défilement. En écoutant ces deux valeurs, vous pouvez atteindre. divers effets dynamiques.

3. Résumé

Grâce aux quatre étapes ci-dessus, nous pouvons obtenir l'effet de défilement vers la gauche et la droite de la page dans uniapp, qui peut être appliqué à une variété de scénarios, tels que l'affichage de produits, l'exposition d'images, la disposition des cartes, etc. . Cependant, vous devez faire attention à l'adaptation de la taille de la zone de défilement et des sous-éléments, ainsi qu'aux paramètres du plug-in better-scroll, afin d'obtenir le meilleur effet.

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!