Panduan lengkap untuk menggunakan tatal yang lebih baik untuk mencapai kesan tatal dalam Vue

Panduan lengkap untuk menggunakan tatal yang lebih baik untuk mencapai kesan tatal dalam Vue

Sebagai rangka kerja JavaScript yang progresif, Vue secara semulajadi perlu melaksanakan beberapa kesan tatal yang perlu digunakan pada antara muka. Berbeza daripada JavaScript asli, Vue mempunyai kitaran hayat yang lebih mudah dan pemikiran berkomponen, dan juga memerlukan pemalam tatal yang lebih cekap dan fleksibel untuk melaksanakan fungsi yang kompleks. Better-scroll ialah pemalam skrol berkuasa yang menyokong pelbagai penyemak imbas arus perdana dan peranti mudah alih. Ia juga merupakan salah satu perpustakaan paling popular di bawah Vue. Artikel ini secara menyeluruh akan memperkenalkan kaedah menggunakan tatal yang lebih baik untuk mencapai kesan tatal Vue. Saya harap ia akan membantu pemula.

1. Prapengetahuan

Menggunakan tatal yang lebih baik untuk mencapai kesan tatal dalam Vue memerlukan beberapa rizab prapengetahuan, yang terutamanya merangkumi aspek berikut:

1. Asas Vue: Fahami konsep asas seperti kitaran hayat Vue, komponen dan pemindahan data
2. Asas JavaScript: Fahami pembolehubah asas, fungsi, objek, tatasusunan dan sintaks ES6; Kaedah pemasangan npm dan cara memperkenalkan perpustakaan pemalam ke dalam Vue.
3. 2. Pasang dan perkenalkan better-scroll

Cara untuk install better-scroll sangat mudah, cuma masukkan arahan berikut dalam terminal:

npm install better-scroll --save

Ia juga mudah untuk memperkenalkan tatal yang lebih baik. Biasanya terdapat dua cara untuk memperkenalkannya:

Perkenalkan tatal yang lebih baik secara global

Perkenalkan tatal yang lebih baik dalam main.js dan lekapkannya pada prototaip Vue apabila diperlukan Tempat itu dipanggil melalui ini.$bs. Seperti yang ditunjukkan di bawah:

import Vue from 'vue'
import BScroll from 'better-scroll'
 
Vue.prototype.$bs = BScroll

Perkenalkan tatal yang lebih baik secara setempat

Gunakan pernyataan import untuk memperkenalkan tatal yang lebih baik di mana ia perlu digunakan, seperti yang ditunjukkan di bawah:

import BScroll from 'better-scroll'

3 Gunakan tatal yang lebih baik untuk mencapai kesan tatal

Selepas memasang dan memperkenalkan tatal yang lebih baik, kita boleh mula menggunakan tatal yang lebih baik dalam Vue untuk mencapai kesan tatal. Langkah-langkah khusus adalah seperti berikut:

Struktur HTML

Pertama, kita perlu membina struktur elemen yang perlu ditatal dalam templat Vue, seperti yang ditunjukkan di bawah:

<template>
  <div class="wrapper">
    <div class="content">
      <!-- 需要滚动的内容 -->
    </div>
  </div>
</template>

Di sini kami membungkus kandungan melalui pembungkus Kemudian kami akan menggunakan pembungkus sebagai bekas untuk memulakan tatal yang lebih baik.

Gaya CSS

Seterusnya, kita perlu menetapkan gaya asas untuk pembungkus dan kandungan, seperti yang ditunjukkan di bawah:

.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
 
.content {
  position: absolute;
  top: 0;
  left: 0;
}

Di sini kita menetapkan pembungkus Untuk kedudukan relatif, ketinggian dan lebar yang diperlukan ditetapkan, serta atribut limpahan:tersembunyi. Kandungan ditetapkan kepada kedudukan mutlak untuk memudahkan interaksi menatal seterusnya.

Mulakan tatal yang lebih baik

Seterusnya, kita perlu memulakan tatal yang lebih baik dalam kitaran hayat komponen Vue yang dicipta, seperti yang ditunjukkan di bawah:

export default {
  data() {
    return {};
  },
  created() {
    const wrapper = this.$refs.wrapper;
    
    this.scroll = new this.$bs(wrapper, {
      // options
    });
  },
  mounted() {},
  methods: {},
  destroyed() {}
};

Di sini kami menggunakan ini.$refs.wrapper untuk mendapatkan elemen pembalut yang dibina sebelum ini, dan kemudian mulakan dengan lebih baik-tatal melalui yang baharu ini.$bs(). Sebelum permulaan, kami juga boleh menghantar item konfigurasi yang berkaitan dalam parameter kedua, seperti arah tatal, acara tatal, bar tatal, dsb.

Hancurkan tatal yang lebih baik

Untuk memastikan kelancaran halaman dan kecekapan penggunaan memori, kita perlu memusnahkan tatal yang lebih baik secara manual sebelum pemusnahan komponen, seperti yang ditunjukkan di bawah:

export default {
  data() {
    return {};
  },
  created() {
    const wrapper = this.$refs.wrapper;
    
    this.scroll = new this.$bs(wrapper, {
      // options
    });
  },
  mounted() {},
  methods: {},
  destroyed() {
    this.scroll.destroy();
  }
};

Di sini kita memusnahkan lebih baik- tatal melalui this.scroll.destroy() dalam kitaran hayat musnah().

5. Contoh kod

Akhir sekali, kami memberikan contoh kod yang lengkap untuk dibaca dan dipelajari oleh pembaca:

<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>
 
<script>
import BScroll from 'better-scroll'
 
export default {
  data() {
    return {
      list: ['Vue', 'React', 'Angular', 'jQuery', 'Backbone', 'Ember'],
    };
  },
  created() {
    const wrapper = this.$refs.wrapper;
    
    this.scroll = new BScroll(wrapper, {
      scrollY: true,
      scrollX: false,
      click: true,
      bounce: true,
      scrollbar: {
        fade: true,
      },
    });
  },
  destroyed() {
    this.scroll.destroy();
  },
};
</script>
 
<style scoped>
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
 
.content {
  position: absolute;
  top: 0;
  left: 0;
}
 
li {
  height: 50px;
  line-height: 50px;
  background-color: #f1f1f1;
  text-align: center;
  font-size: 20px;
  margin: 10px 0;
  border-radius: 5px;
}
</style>

6 pengenalan artikel ini, pembaca boleh belajar cara memasang, memperkenalkan dan menggunakan tatal yang lebih baik dalam Vue untuk mencapai pelbagai kesan tatal. Pada masa yang sama, kami juga mempelajari beberapa item konfigurasi rolling biasa dan kaedah kitaran hayat untuk meletakkan asas bagi pembangunan dan pembelajaran selanjutnya. Semoga artikel ini bermanfaat kepada para pembaca jika ada kekurangan mohon dimaklumkan.

Atas ialah kandungan terperinci Panduan lengkap untuk menggunakan tatal yang lebih baik untuk mencapai kesan tatal dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!