Cara melaksanakan klik untuk memuatkan lebih banyak fungsi dalam uniapp

Dengan perkembangan industri telefon mudah alih, aplikasi mudah alih menjadi semakin popular, dan pembangunan berbilang terminal telah menjadi kaedah biasa. Berdasarkan ini, uniapp ternyata menjadi rangka kerja pembangunan yang boleh membangunkan iOS, Android, H5 dan platform lain pada masa yang sama. Dalam uniapp, bagaimana untuk mencapai lebih banyak klik untuk memuatkan?

1. Gunakan komponen uni-list

Uni-list ialah komponen senarai yang dirangkumkan oleh uniapp, yang melaksanakan pemaparan dan penatalan senarai. Dalam senarai uni, pemuat atribut tambahan ditetapkan, yang boleh memuatkan halaman seterusnya secara automatik selepas meluncur ke bawah.

Pertama, tentukan komponen senarai-uni dalam templat dan tetapkan atribut loadmore kepada benar Kodnya adalah seperti berikut:

<template>
  <uni-list :loadmore="true" :loadtext="loadtext" @loadmore="getMoreData">
    <uni-list-item v-for="(item, index) in listData" :key="index">
      {{item}}
    </uni-list-item>
  </uni-list>
</template>

Antaranya, loadtext ialah teks yang dipaparkan semasa memuatkan. , dan getMoreData ialah kaedah Tersuai yang digunakan untuk mendapatkan data halaman seterusnya.

Seterusnya, tentukan data data dan kaedah getMoreData dalam skrip Kodnya adalah seperti berikut:

<script>
  export default {
    data() {
      return {
        // 列表数据
        listData: [],
        // 加载时的文本提示
        loadtext: '正在加载...',
        // 当前页码
        currentPage: 1,
        // 每页展示数量
        pageSize: 10
      }
    },
    methods: {
      getMoreData() {
        // 发送请求获取下一页数据
        uni.request({
          url: 'https://example.com/getMoreData',
          data: {
            page: this.currentPage + 1,
            pageSize: this.pageSize
          },
          success: res => {
            // 将数据添加到列表中
            this.listData = this.listData.concat(res.data.list)
            // 将页码+1
            this.currentPage++
            // 如果没有更多数据了，显示已经到底部
            if (!res.data.hasMoreData) {
              this.loadtext = '没有更多了'
            }
          },
          fail: err => {
            console.log(err)
          }
        })
      }
    }
  }
</script>

Kaedah getMoreData melaksanakan fungsi menghantar permintaan untuk mendapatkan data halaman seterusnya. , dan memperoleh data Kemudian tambahkannya pada senarai. Pada masa yang sama, apabila tiada lagi data untuk dimuatkan, teks muatan ditetapkan kepada "tiada lagi".

2. Butang tersuai untuk mencetuskan pemuatan lebih banyak

Selain menggunakan atribut loadmore uni-list, kami juga boleh menggunakan butang tersuai untuk mencetuskan pemuatan lebih banyak fungsi. Kaedah pelaksanaan khusus adalah seperti berikut.

Pertama, tambahkan butang tersuai dalam templat untuk mencetuskan pemuatan lagi Kodnya adalah seperti berikut:

<template>
  <div>
    <uni-list :loadmore="false">
      <uni-list-item v-for="(item, index) in listData" :key="index">
        {{item}}
      </uni-list-item>
    </uni-list>
    <button @click="getMoreData">点击加载更多</button>
  </div>
</template>

Antaranya, atribut loadmore bagi uni-list ditetapkan kepada false, yang bermaksud Tidak memuatkan lebih banyak secara automatik dan perlu dicetuskan secara manual dengan mengklik butang.

Kemudian, tentukan data data dan kaedah getMoreData dalam skrip Kodnya adalah seperti berikut:

<script>
  export default {
    data() {
      return {
        // 列表数据
        listData: [],
        // 当前页码
        currentPage: 1,
        // 每页展示数量
        pageSize: 10,
        // 是否有更多数据
        hasMoreData: true
      }
    },
    methods: {
      getMoreData() {
        // 发送请求获取下一页数据
        uni.request({
          url: 'https://example.com/getMoreData',
          data: {
            page: this.currentPage + 1,
            pageSize: this.pageSize
          },
          success: res => {
            // 将数据添加到列表中
            this.listData = this.listData.concat(res.data.list)
            // 将页码+1
            this.currentPage++
            // 如果没有更多数据了，隐藏按钮
            if (!res.data.hasMoreData) {
              this.hasMoreData = false
            }
          },
          fail: err => {
            console.log(err)
          }
        })
      }
    }
  }
</script>

Dalam kaedah getMoreData, kami juga menghantar permintaan untuk mendapatkan halaman seterusnya. data, dan selepas memperoleh data Tambahnya pada senarai. Apabila tiada lagi data, tetapkan hasMoreData kepada palsu supaya butang tidak lagi dipaparkan.

Akhir sekali, kita perlu menetapkan v-if judgement pada butang untuk menilai sama ada terdapat lebih banyak data Kod tersebut adalah seperti berikut:

<button v-if="hasMoreData" @click="getMoreData">点击加载更多</button>

Dengan cara ini, kita boleh klik. butang untuk memuatkan lebih banyak data secara manual.

Ringkasan

Artikel ini memperkenalkan dua cara untuk mencapai lebih banyak klik untuk muat dalam uniapp: menggunakan komponen senarai uni dan pencetus butang tersuai. Sama ada cara, ia pada asasnya kaedah menghantar permintaan untuk mendapatkan lebih banyak data dan menambahkannya ke senarai. Bagi pembangun, mana-mana kaedah pelaksanaan yang mereka pilih boleh dipilih berdasarkan senario tertentu.

Atas ialah kandungan terperinci Cara melaksanakan klik untuk memuatkan lebih banyak fungsi dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!