Strategi pengoptimuman untuk UniApp untuk melaksanakan senarai tatal dan pemuatan tidak terhingga

UniApp melaksanakan strategi pengoptimuman untuk menatal senarai dan pemuatan tak terhingga

Dengan pembangunan aplikasi mudah alih, senarai tatal dan pemuatan tak terhingga telah menjadi keperluan fungsi biasa dalam aplikasi mudah alih. Sebagai rangka kerja pembangunan aplikasi merentas platform, UniApp boleh menyesuaikan diri dengan berbilang platform pada masa yang sama, jadi sokongan untuk senarai menatal dan pemuatan tidak terhingga juga telah menjadi salah satu tumpuan pembangun. Artikel ini akan memperkenalkan strategi pengoptimuman untuk melaksanakan senarai tatal dan pemuatan tanpa had dalam UniApp, dan memberikan contoh kod yang sepadan.

1. Pelaksanaan senarai tatal

Di UniApp, pelaksanaan senarai tatal adalah berdasarkan komponen senarai uni, yang boleh merealisasikan paparan dan tatal senarai. Untuk mengoptimumkan kesan penatalan, kami boleh menggunakan strategi pengoptimuman berikut.

1. Pemuatan data dalam halaman

Apabila terdapat terlalu banyak data senarai, memuatkan semua data serentak akan menyebabkan masa pemuatan menjadi terlalu lama, menjejaskan pengalaman pengguna secara serius. Untuk menyelesaikan masalah ini, kami boleh menggunakan strategi pemuatan data paging. Iaitu, apabila halaman pertama kali dimuatkan, hanya sebahagian daripada data dimuatkan untuk paparan, dan apabila pengguna menatal ke bahagian bawah senarai, data halaman seterusnya dimuatkan.

<template>
  <view>
    <uni-list :data="listData" :total="total" :page-size="pageSize" @loadmore="loadMore">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      total: 0, // 总数据量
      pageSize: 10, // 每页数据量
      currentPage: 1 // 当前页码
    };
  },
  mounted() {
    // 页面初次加载时加载第一页的数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据与总数据量
        this.listData = this.listData.concat(fakeData); // 假设fakeData为每页的数据
        this.total = 100; // 假设总数据量为100
      }, 500);
    },
    loadMore() {
      if (this.currentPage * this.pageSize < this.total) {
        this.currentPage += 1;
        this.loadData();
      }
    }
  }
};
</script>

2. Pendikit dan anti goncang

Pengoptimuman senarai penatalan juga perlu mempertimbangkan isu prestasi yang disebabkan oleh penatalan yang kerap pengguna. Untuk mengurangkan bilangan pencetus peristiwa tatal, kami boleh menggunakan strategi pendikit dan anti goncang. Pendikitan bermakna fungsi hanya dicetuskan sekali dalam selang masa tertentu bermakna jika fungsi dicetuskan beberapa kali dalam selang masa tertentu, hanya masa terakhir dilaksanakan. Dalam UniApp, kami sering menggunakan kaedah wx.createSelectorQuery untuk mendapatkan maklumat tentang bekas skrol Kami boleh mengoptimumkan prestasi senarai skrol dengan menetapkan anti goncang atau pendikit acara skrol.

<template>
  <view>
    <uni-scroll-view :scroll-top="scrollTop" @scroll="scrollHandler">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      scrollTop: 0 // 滚动位置
    };
  },
  mounted() {
    // 页面初次加载时即加载全部数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = fakeData; // 假设fakeData为全部数据
      }, 500);
    },
    scrollHandler(e) {
      if (this.throttleTimeout) clearTimeout(this.throttleTimeout);
      this.throttleTimeout = setTimeout(() => {
        this.scrollTop = e.detail.scrollTop;
        if (this.scrollTop < 10 && this.listData.length < fakeData.length) {
          this.loadData();
        }
      }, 100);
    }
  }
};
</script>

2. Pelaksanaan pemuatan tak terhingga

Pemuatan tak terhingga merujuk kepada fungsi memuatkan data secara dinamik di bahagian bawah senarai supaya ia boleh memuatkan data baharu secara automatik semasa pengguna menatal. Untuk mencapai pemuatan tanpa had, kami boleh menggunakan strategi pengoptimuman berikut.

1. Pramuat halaman seterusnya

Apabila item terakhir dipaparkan dalam senarai, muatkan data halaman seterusnya terlebih dahulu tanpa membuat pengguna menunggu. Apabila pengguna menatal ke bawah, data pada halaman seterusnya boleh dipaparkan terus untuk mengelakkan masa pemuatan yang lama.

<template>
  <view>
    <uni-list :data="listData" @loadmore="loadMore" :is-finished="isFinished">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
  </uni-list>
</view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      isFinished: false, // 数据是否加载完毕
      currentPage: 1 // 当前页码
    };
  },
  mounted() {
    // 页面初次加载时加载第一页的数据
    this.loadData();
  },
  methods: {
    loadData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = this.listData.concat(fakeData); // 假设fakeData为每页的数据
        // 当没有更多数据时，设置isFinished为true
        if (this.listData.length >= totalData.length) {
          this.isFinished = true;
        }
      }, 500);
    },
    loadMore() {
      if (!this.isFinished) {
        this.currentPage += 1;
        this.loadData();
      }
    }
  }
};
</script>

2. Mencegah pemuatan berulang

Untuk mengelakkan pemuatan kumpulan data yang sama berulang kali, adalah perlu untuk mengelakkan peristiwa pemuatan data daripada dicetuskan semula sebelum permintaan selesai. Dalam UniApp, kami boleh menentukan sama ada data sedang dimuatkan dengan menetapkan bendera.

<template>
  <view>
    <uni-scroll-view :scroll-top="scrollTop" @scrolltolower="scrollToLower">
      <view slot="default" v-for="(item, index) in listData" :key="index">{{ item }}</view>
    </uni-scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [], // 列表数据
      scrollTop: 0, // 滚动位置
      isLoading: false // 是否正在加载数据
    };
  },
  mounted() {
    // 页面初次加载时即加载全部数据
    this.loadData();
  },
  methods: {
    loadData() {
      if (this.isLoading) return;
      this.isLoading = true;
      // 模拟异步请求数据
      setTimeout(() => {
        // 更新列表数据
        this.listData = fakeData; // 假设fakeData为全部数据
        this.isLoading = false;
      }, 500);
    },
    scrollToLower() {
      if (this.isLoading) return;
      this.loadData();
    }
  }
};
</script>

Kesimpulan:

Senarai tatal dan pemuatan tanpa had adalah perkara biasa dalam aplikasi mudah alih dan penting untuk meningkatkan pengalaman pengguna. Melalui strategi pengoptimuman untuk UniApp, kami boleh meningkatkan prestasi dan pengalaman pengguna aplikasi sambil memastikan realisasi fungsi. Saya harap senarai tatal UniApp dan strategi pengoptimuman pemuatan tidak terhingga yang diperkenalkan dalam artikel ini boleh membantu kerja pembangunan anda.

Atas ialah kandungan terperinci Strategi pengoptimuman untuk UniApp untuk melaksanakan senarai tatal dan pemuatan tidak terhingga. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!