Optimization strategy for UniApp to implement scrolling list and infinite loading

UniApp’s optimization strategy for implementing scrolling lists and infinite loading

With the development of mobile applications, scrolling lists and infinite loading have become common functional requirements in mobile applications. As a cross-platform application development framework, UniApp can adapt to multiple platforms at the same time, so support for scrolling lists and infinite loading has also become one of the focuses of developers. This article will introduce the optimization strategy for implementing scrolling lists and infinite loading in UniApp, and give corresponding code examples.

1. Implementation of rolling list

In UniApp, the implementation of rolling list is based on the uni-list component, which can realize the display and scrolling of the list. In order to optimize the scrolling effect, we can use the following optimization strategies.

1. Data loading in pages

When there is too much list data, loading all the data at once will cause the loading time to be too long, seriously affecting the user experience. In order to solve this problem, we can adopt the strategy of paging data loading. That is, when the page is first loaded, only part of the data is loaded for display, and when the user scrolls to the bottom of the list, the data of the next page is loaded.

<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. Throttling and anti-shake

The optimization of the scrolling list also needs to consider the performance issues caused by users' frequent scrolling. In order to reduce the number of triggers of scroll events, we can use throttling and anti-shake strategies. Throttling means that a function is only triggered once within a certain time interval; anti-shaking means that if a function is triggered multiple times within a certain time interval, only the last time is executed. In UniApp, we often use the wx.createSelectorQuery method to obtain information about the scroll container. We can optimize the performance of the scroll list by setting the anti-shake or throttling of the scroll event.

<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. Implementation of infinite loading

Infinite loading refers to the function of dynamically loading data at the bottom of the list so that it can automatically load new data as the user scrolls. In order to achieve infinite loading, we can adopt the following optimization strategies.

1. Preload the next page

When the last item is displayed in the list, load the data of the next page in advance without letting the user wait. When the user scrolls to the bottom, the data on the next page can be displayed directly to avoid long loading time.

<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. Prevent repeated loading

In order to avoid loading the same batch of data repeatedly, it is necessary to prohibit the event of loading data from being triggered again before the request is completed. In UniApp, we can determine whether data is loading by setting a flag.

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

Conclusion:

Scrolling lists and infinite loading are very common in mobile applications and are crucial to improving user experience. Through the optimization strategy for UniApp, we can improve the performance and user experience of the application while ensuring the realization of functions. I hope the UniApp scrolling list and infinite loading optimization strategies introduced in this article can be helpful to your development work.

The above is the detailed content of Optimization strategy for UniApp to implement scrolling list and infinite loading. For more information, please follow other related articles on the PHP Chinese website!