Comment implémenter des barres de défilement personnalisées à l'aide de Vue ?

Vue est un framework JavaScript populaire qui aide les développeurs à créer des applications Web avec une interactivité riche. Les barres de défilement sont un élément très important dans les applications Web, mais les barres de défilement par défaut des navigateurs sont souvent laides et ne conviennent pas à toutes les situations. Dans cet article, nous présenterons comment utiliser Vue pour implémenter des barres de défilement personnalisées.

Étape 1 : Créer un conteneur

Tout d'abord, nous devons créer un conteneur, créons un conteneur div qui contient une liste :

<div class="container">
  <ul class="list">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

#🎜🎜 # Nous devons rendre le conteneur défilable et masquer la barre de défilement par défaut. Ajoutons un peu de style CSS :

.container {
  height: 300px;
  overflow: hidden;
  position: relative;
}

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 0.5em;
}

::-webkit-scrollbar-track {
  background-color: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 16px;
}

Ici, nous définissons la hauteur du conteneur à 300px et masquons la barre de défilement par défaut afin de pouvoir utiliser une barre de défilement personnalisée.

Étape 2 : Lier l'écouteur d'événement de défilement

Nous devons écouter l'événement de défilement du conteneur afin de pouvoir mettre à jour la position de la barre de défilement personnalisée. Dans Vue, nous pouvons utiliser l'attribut @scroll pour lier les écouteurs d'événements :

<div class="container" @scroll="onScroll">
  <ul class="list">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

@scroll 属性来绑定事件监听器：

new Vue({
  el: '#app',
  data: {
    items: [], // 数据数组
    scrollTop: 0, // 当前滚动位置
    containerHeight: 0, // 容器高度
    listHeight: 0, // 列表高度
    thumbHeight: 0, // 滚动条高度
  },
  created() {
    // 加载数据
    this.loadData();
  },
  methods: {
    // 滚动事件回调函数
    onScroll(event) {
      this.scrollTop = event.target.scrollTop;
      this.thumbHeight = this.containerHeight / this.listHeight * this.containerHeight;
    },
    // 加载数据
    loadData() {
      // 向服务器请求数据，这里省略具体实现
    },
  },
});

这里，我们将 onScroll 方法作为滚动事件的回调函数，该方法将在容器滚动时被触发。现在，让我们在 Vue 的实例中定义 onScroll 方法：

<div class="container" ref="container" @scroll="onScroll">
  <ul class="list" ref="list">
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
  <div class="scrollbar" :style="{ height: thumbHeight + 'px', top: scrollTop + 'px' }"></div>
</div>

在 onScroll 方法中，我们更新了 scrollTop 属性的值，这是容器的滚动位置。我们还计算了自定义滚动条的高度，以便它可以与容器的滚动量匹配。

接下来，让我们在模板中添加自定义滚动条：

computed: {
  // 容器高度
  containerHeight() {
    return this.$refs.container.offsetHeight;
  },
  // 列表高度
  listHeight() {
    return this.$refs.list.offsetHeight;
  },
},

这里，我们在容器中添加了一个新的 div 元素，用于表示自定义滚动条。我们将 thumbHeight 和 scrollTopIci, nous utilisons la méthode onScroll comme rappel d'événement de défilement fonction qui sera déclenchée lorsque le conteneur défilera. Maintenant, définissons la méthode onScroll dans l'instance Vue :

rrreee

Dans la méthode onScroll, nous mettons à jour le scrollTop Le valeur de la propriété code>, qui est la position de défilement du conteneur. Nous avons également calculé la hauteur de la barre de défilement personnalisée afin qu'elle corresponde au niveau de défilement du conteneur.

Ensuite, ajoutons une barre de défilement personnalisée au modèle :

rrreee

Ici, nous avons ajouté un nouvel élément div dans le conteneur pour représenter la barre de défilement de personnalisation. Nous lions thumbHeight et scrollTop à la hauteur et à la position supérieure de l'élément div.

Enfin, nous devons mettre à jour certaines propriétés calculées afin de pouvoir calculer correctement la hauteur du conteneur et lister :

rrreee#🎜🎜#Maintenant, nous avons terminé la mise en œuvre de la personnalisation barre de défilement. Lorsque vous exécutez l'application, vous remarquerez que le conteneur dispose d'une barre de défilement personnalisée qui fait défiler la liste. #🎜🎜##🎜🎜#Summary#🎜🎜##🎜🎜#Dans cet article, nous avons présenté comment utiliser Vue pour implémenter des barres de défilement personnalisées. Nous commençons par créer le conteneur, puis ajoutons des styles et des écouteurs d'événements. Nous avons également ajouté des barres de défilement personnalisées à l'aide de modèles et de propriétés calculées. Au fur et à mesure que vous vous entraînez, vous pouvez explorer davantage d'options de barre de défilement personnalisées, telles que l'ajout de pistes et le déplacement d'effets. Quoi que vous choisissiez de faire, Vue permet une expérience de défilement hautement personnalisée dans votre application Web. #🎜🎜#

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!