ホームページ >ウェブフロントエンド >uni-app >uniappでリストページング機能を実装する方法
uniapp にリスト ページング機能を実装する方法
概要:
モバイル アプリケーションの開発では、ユーザー エクスペリエンスを向上させるために大量のデータを表示する必要があることがよくあります。 1 回のロード回数を減らすためにページ単位でロードされることが多く、ロードされるデータ量が多いほど応答速度が向上します。この記事では、uniapp にリスト ページング機能を実装する方法とコード例を紹介します。
準備作業:
まず、uniapp プロジェクトに uni-paging コンポーネントをインストールして導入する必要があります。 npm を通じてインストールできます:
npm i uni-paging
次に、リスト ページング機能を使用する必要があるページにこのコンポーネントを導入します:
import uniPaging from '@dcloudio/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 サイトの他の関連記事を参照してください。