Bagaimana untuk melaksanakan bar skrol tersuai menggunakan Vue?

Vue ialah rangka kerja JavaScript popular yang membantu pembangun mencipta aplikasi web dengan interaktiviti yang kaya. Bar skrol ialah elemen yang sangat penting dalam aplikasi web, tetapi bar skrol lalai penyemak imbas selalunya hodoh dan tidak sesuai untuk semua situasi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk melaksanakan bar skrol tersuai.

Langkah 1: Buat bekas

Mula-mula, kita perlu mencipta bekas, mari buat bekas div yang mengandungi senarai:

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

Kita perlu menjadikan bekas itu boleh ditatal dan kita perlu menyembunyikan bar skrol lalai. Mari tambahkan beberapa penggayaan 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;
}

Di sini, kami menetapkan ketinggian bekas kepada 300px dan menyembunyikan bar skrol lalai supaya kami boleh menggunakan bar skrol tersuai.

Langkah 2: Ikat pendengar acara tatal

Kita perlu mendengar acara tatal bekas supaya kita boleh mengemas kini kedudukan bar tatal tersuai. Dalam Vue, kami boleh menggunakan atribut @scroll untuk mengikat pendengar acara: @scroll 属性来绑定事件监听器：

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

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

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

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

<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>

这里，我们在容器中添加了一个新的 div 元素，用于表示自定义滚动条。我们将 thumbHeight 和 scrollTop

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

Di sini, kami menggunakan kaedah onScroll sebagai fungsi panggil balik acara skrol, yang akan Dipecat apabila bekas ditatal. Sekarang, mari kita takrifkan kaedah onScroll dalam contoh Vue:

rrreee

Dalam kaedah onScroll, kami mengemas kini nilai scrollTop atribut, Ini ialah kedudukan tatal bekas. Kami juga mengira ketinggian bar skrol tersuai supaya sepadan dengan jumlah penatalan bekas.

Seterusnya, mari tambahkan bar skrol tersuai pada templat:

rrreee

Di sini, kami telah menambahkan elemen div baharu dalam bekas untuk mewakili bar skrol tersuai. Kami mengikat thumbHeight dan scrollTop pada ketinggian dan kedudukan teratas elemen div.

Akhir sekali, kami perlu mengemas kini beberapa sifat yang dikira supaya kami boleh mengira ketinggian bekas dengan betul dan menyenaraikan: 🎜rrreee🎜Kini, kami telah menyelesaikan pelaksanaan bar skrol tersuai. Apabila anda menjalankan aplikasi, anda akan melihat bahawa bekas mempunyai bar skrol tersuai yang menatal senarai. 🎜🎜Ringkasan🎜🎜Dalam artikel ini, kami memperkenalkan cara menggunakan Vue untuk melaksanakan bar skrol tersuai. Kami mulakan dengan mencipta bekas dan kemudian menambah gaya dan pendengar acara. Kami juga menambah bar skrol tersuai menggunakan templat dan sifat yang dikira. Semasa anda berlatih, anda boleh meneroka lebih banyak pilihan bar skrol tersuai, seperti menambah trek dan kesan menyeret. Tidak kira apa yang anda pilih untuk lakukan, Vue boleh mendayakan pengalaman menatal yang sangat disesuaikan dalam aplikasi web anda. 🎜

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan bar skrol tersuai menggunakan Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!