How to implement list paging function in uniapp

How to implement list paging function in uniapp

Overview:
In developing mobile applications, it is often necessary to display a large amount of data. In order to improve the user experience, the data is often loaded in pages to reduce the number of times a single The amount of data loaded increases the response speed. This article will introduce how to implement list paging function in uniapp and provide code examples.

1. Preparation work:
   First, you need to install and introduce the uni-paging component in the uniapp project. You can install it through npm:

   npm i uni-paging

Then, introduce this component into the page where you need to use the list paging function:

import uniPaging from '@dcloudio/uni-paging'

2. Use the uni-paging component ：
   Next, use the uni-paging component in the template of the page and set the necessary properties and events:

<uni-paging
  ref="paging"
  :total="total"
  :current="current"
  @change="handleChange"
>
  <!-- 数据列表 -->
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>

  <!-- 加载更多 -->
  <view slot="loading" class="loading">
    数据加载中...
  </view>
</uni-paging>

Among them, the total attribute represents the total number of pages , current attribute indicates the current page number. @changeThe event will be triggered when the page number changes. We need to load the data corresponding to the page number in this event.

Define relevant data in data:

data() {
  return {
    list: [],   // 数据列表
    total: 0,   // 总页数
    current: 1  // 当前页码
  }
},

Define the method of loading data in methods, and send an interface request to obtain data according to the page number:

methods: {
  loadData() {
    // 发送请求获取数据，此处为示例代码
    uni.request({
      url: 'https://example.com/data',
      data: {
        page: this.current,
        pageSize: 10  // 每页显示的数据量
      },
      success: (res) => {
        if (res.statusCode === 200) {
          this.list = res.data.list;   // 更新数据列表
          this.total = res.data.total; // 更新总页数
        }
      }
    })
  },

  handleChange(current) {
    this.current = current;   // 更新当前页码
    this.loadData();         // 加载对应页码的数据
  }
},

Start when the page is loaded Paging component and loading the data of the first page:

onLoad() {
  const paging = this.$refs.paging;
  paging.setOptions({
    loadingText: '正在加载...',
    statusTextMap: {
      more: '加载更多',
      noMore: '没有更多'
    }
  });
  this.loadData();
}

At this point, we have successfully implemented the list paging function in uniapp.

Summary:
By introducing the uni-paging component, we can easily implement the list paging function in uniapp. Just set the relevant properties and events, and write the method to load the data. I hope the introduction in this article will be helpful to you in implementing list paging function in uniapp development.

Code example:

<template>
  <view class="container">
    <uni-paging
      ref="paging"
      :total="total"
      :current="current"
      @change="handleChange"
    >
      <ul>
        <li v-for="item in list" :key="item.id">{{ item.name }}</li>
      </ul>

      <view slot="loading" class="loading">
        数据加载中...
      </view>
    </uni-paging>
  </view>
</template>

<script>
import uniPaging from '@dcloudio/uni-paging'

export default {
  components: {
    uniPaging
  },

  data() {
    return {
      list: [],
      total: 0,
      current: 1
    }
  },

  methods: {
    loadData() {
      uni.request({
        url: 'https://example.com/data',
        data: {
          page: this.current,
          pageSize: 10
        },
        success: (res) => {
          if (res.statusCode === 200) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        }
      })
    },

    handleChange(current) {
      this.current = current;
      this.loadData();
    }
  },

  onLoad() {
    const paging = this.$refs.paging;
    paging.setOptions({
      loadingText: '正在加载...',
      statusTextMap: {
        more: '加载更多',
        noMore: '没有更多'
      }
    });
    this.loadData();
  }
}
</script>

<style>
.container {
  width: 100%;
  height: 100%;
  padding: 20rpx;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 10rpx;
  border-bottom: 1rpx solid #ddd;
}

.loading {
  text-align: center;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}
</style>

The above is a simple example of how to implement list paging function in uniapp. By using the uni-paging component, we can easily implement paged loading of lists and improve the user experience. Hope this article is helpful to you.

The above is the detailed content of How to implement list paging function in uniapp. For more information, please follow other related articles on the PHP Chinese website!