Bagaimana untuk menggunakan Vue untuk melaksanakan penyegaran tarik-turun dan pemuatan tarik-turun?

Dengan populariti Internet mudah alih, tarik-turun untuk memuat semula dan tarik-turun untuk memuatkan telah menjadi salah satu ciri standard apl dan tapak web moden ini boleh meningkatkan pengalaman pengguna dan prestasi halaman. Di bawah rangka kerja Vue, kami boleh menggunakan beberapa pemalam atau menulis kod sendiri untuk mencapai dua kaedah interaksi ini.

Pelaksanaan muat semula tarik-turun

Segar semula tarik-turun bermakna pengguna mencetuskan semula data dengan menarik halaman ke bawah. Dalam Vue, kami boleh melaksanakan muat semula tarik turun melalui semua pilihan dan API Vue, dan cara terpantas dan paling dipercayai ialah menggunakan vue-pull-to.

vue-pull-to ialah komponen yang melaksanakan operasi tarik-untuk-segar semula dalam Vue, membolehkan kami menambah tarik-untuk-segar semula pada aplikasi dengan sangat mudah. Dibangunkan oleh pengajar Vue.js Summit Matt Maribojoc, komponen ini menjadikan penggunaan vue-pull-to sama mudah dan bersih seperti menggunakan komponen Vue biasa.

Mula-mula, pasang vue-pull-to dalam projek:

npm install vue-pull-to --save

Kemudian, perkenalkan vue-pull-to ke dalam komponen yang memerlukan muat semula tarik-turun, dan daftarkannya sebagai komponen Vue semasa.

<template>
  <div>
    <pull-to @refresh="refresh" :disabled="disabled" :high-action="true">
      <div v-for="(item, index) in list" :key="index" class="item">{{ item }}</div>
    </pull-to>
  </div>
</template>

<script>
  import PullTo from 'vue-pull-to'

  export default {
    components: {
      PullTo
    },
    data() {
      return {
        list: [], // 下拉刷新的数据
        disabled: false, // 是否禁用下拉刷新
      }
    },
    methods: {
      // 下拉刷新回调事件
      refresh() {
        // 发送请求，获取最新数据
        axios.get('/getList').then(res => {
          this.list = res.data
        })
      }
    }
  }
</script>

Dalam kod di atas, kami mula-mula memperkenalkan vue-pull-to dan mendaftarkannya sebagai komponen. Seterusnya, gunakan teg tarik-ke dalam templat dan dengar acara muat semulanya (peristiwa ini dicetuskan apabila pengguna menarik halaman ke bawah), dan kemudian menghantar permintaan kepada pelayan dalam fungsi panggil balik muat semula untuk mendapatkan data terkini dan tetapkan data kepada senarai, supaya apabila Selepas muat semula tarik-turun selesai, data senarai akan dikemas kini dan halaman akan dipaparkan semula.

Pelaksanaan pull-up loading

Pull-up loading biasanya berlaku apabila halaman menatal ke bawah Apabila pengguna menatal ke bawah, halaman akan mencetuskan operasi pemuatan data secara automatik. Dalam Vue, kita boleh menggunakan pemalam vue-infinite-loading untuk melaksanakan fungsi pull-up loading.

vue-infinite-loading ialah pemalam pemuatan berasaskan Vue untuk senarai panjang yang membolehkan kami menambah kandungan atau data secara dinamik semasa menatal senarai. Ia menyediakan dua cara untuk mendengar acara tatal, yang pertama ialah penggunaan penting, dan yang kedua ialah penggunaan berasaskan komponen, dan menyokong pengurusan keadaan semasa memuatkan dan apabila tiada lagi data.

Mula-mula, pasang vue-infinite-loading dalam projek:

npm install vue-infinite-loading --save

Kemudian perkenalkan komponen vue-infinite-loading ke dalam komponen yang perlu menambah pull-up loading, dan daftarkannya sebagai komponen Vue semasa.

<template>
  <div>
    <div v-for="(item, index) in list" :key="index" class="item">
      {{ item }}
    </div>
    <infinite-loading :on-infinite="onInfinite" spinner="bubbles" :distance="120">
      <div slot="no-results">没有更多了</div>
    </infinite-loading>
  </div>
</template>

<script>
  import InfiniteLoading from 'vue-infinite-loading'

  export default {
    components: {
      InfiniteLoading
    },
    data() {
      return {
        list: [], // 上拉加载的数据
        page: 1, // 当前页码
        size: 10, // 每页数量
        isLoading: false, // 是否正在加载中
      }
    },
    methods: {
      // 上拉加载回调事件
      onInfinite() {
        if (this.isLoading) return
        this.isLoading = true
        axios.get('/getList', {page: this.page, size: this.size}).then(res => {
          this.list = this.list.concat(res.data)
          this.page++
          this.isLoading = false
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
        })
      }
    }
  }
</script>

Dalam kod di atas, kami mula-mula memperkenalkan vue-infinite-loading dan mendaftarkannya sebagai komponen. Kemudian, gunakan teg pemuatan infinite dalam templat dan dengar acara on-infinite (peristiwa ini akan dicetuskan apabila pengguna menatal ke bawah) dan kemudian hantar permintaan kepada pelayan dalam fungsi panggil balik onInfinite untuk mendapatkan yang seterusnya data halaman dan tambahkannya ke Dalam tatasusunan senarai, cetuskan acara $InfiniteLoading:loaded, supaya apabila halaman dimuatkan, status pemuatan akan dikosongkan dan halaman akan dikemas kini dan diberikan. Kami juga boleh menggunakan atribut jarak untuk mengawal jarak yang mencetuskan pemuatan, atribut pemutar untuk menetapkan animasi pemuatan, dan slot tiada keputusan untuk menetapkan maklumat segera selepas pemuatan selesai, dsb.

Ringkasan

Dalam era Internet mudah alih, muat semula tarik-turun dan muat turun telah menjadi ciri standard apl dan tapak web moden Untuk meningkatkan pengalaman pengguna, Vue menyediakan beberapa pemalam dan API untuk melaksanakan kedua-dua interaksi ini kaedah untuk memudahkan pembangun dengan cepat Menambah fungsi yang sepadan untuk menjadikan pengalaman pengguna lebih selesa. Kami telah memberikan pengenalan ringkas dan demonstrasi kod kaedah penyegaran dan pemuatan tarik-turun dalam Vue Kami berharap ia akan membantu semua orang dalam pembangunan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan Vue untuk melaksanakan penyegaran tarik-turun dan pemuatan tarik-turun?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!