uniappでリストページング機能を実装する方法-uni-app-php.cn

uniappでリストページング機能を実装する方法

王林

リリース： 2023-07-04 18:09:14

オリジナル

4192 人が閲覧しました

uniapp にリストページング機能を実装する方法

概要:
モバイルアプリケーションの開発では、ユーザーエクスペリエンスを向上させるために大量のデータを表示する必要があることがよくあります。 1 回のロード回数を減らすためにページ単位でロードされることが多く、ロードされるデータ量が多いほど応答速度が向上します。この記事では、uniapp にリストページング機能を実装する方法とコード例を紹介します。

準備作業:
まず、uniapp プロジェクトに uni-paging コンポーネントをインストールして導入する必要があります。 npm を通じてインストールできます:
```
npm i uni-paging
```
ログイン後にコピー

次に、リストページング機能を使用する必要があるページにこのコンポーネントを導入します:

import uniPaging from '@dcloudio/uni-paging'

ログイン後にコピー

uni-paging コンポーネント :
次に、ページのテンプレートで uni-paging コンポーネントを使用し、必要なプロパティとイベントを設定します:

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

ログイン後にコピー

そのうち、total 属性は総ページ数を表し、current 属性は現在のページ番号を示します。 @changeページ番号が変更されるとイベントが発生します。このイベントではページ番号に対応するデータをロードする必要があります。

データで関連するデータを定義します:

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();         // 加载对应页码的数据
  }
},

ログイン後にコピー

Startページがロードされるときページングコンポーネントと最初のページのデータのロード:

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

ログイン後にコピー

この時点で、uniapp にリストページング機能が正常に実装されました。

概要:
uni-paging コンポーネントを導入することで、uniapp にリストページング機能を簡単に実装できます。関連するプロパティとイベントを設定し、データをロードするメソッドを記述するだけです。この記事での紹介が、uniapp開発でリストページング機能を実装する際に役立つことを願っています。

コード例:

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

ログイン後にコピー

上記は、uniapp でリストページング機能を実装する方法の簡単な例です。ユニページングコンポーネントを使用すると、リストのページ読み込みを簡単に実装し、ユーザーエクスペリエンスを向上させることができます。この記事がお役に立てば幸いです。

以上がuniappでリストページング機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。