uniapp でプルダウン更新機能とプルアップロード機能を実装する方法-uni-app-php.cn

uniapp でプルダウン更新機能とプルアップロード機能を実装する方法

PHPz

リリース： 2023-04-14 15:36:45

オリジナル

7259 人が閲覧しました

モバイル端末開発の継続的なアップグレードに伴い、モバイルアプリケーションに対する開発者の需要もますます高まっています。多くのモバイルアプリケーションでは、プルダウンによる更新とプルアップによるロードの方が重要な機能であり、ユーザーエクスペリエンスを向上させるために、多くのモバイルアプリケーションにこれら 2 つの機能が追加されます。ここでは、uniapp で更新を行うプルダウンと、より多くの機能を読み込むためのプルアップを実装する方法を紹介します。

1. 基本コンテンツの紹介

uniapp は、Vue.js フレームワークに基づくクロスプラットフォームアプリケーション開発フレームワークで、ワンタイムの書き込みとマルチエンドの公開をサポートします。優れたクロスプラットフォーム機能と多くのネイティブ API が組み込まれているため、開発者は他の開発言語を学習することなく、これらの API を uniapp で直接使用できます。

uniapp では、プルダウン更新とプルアップ読み込みはより組み込みのコンポーネント、つまり <uni-scroll-view> であり、このコントロールを通じてプルを実現できます。 -down リフレッシュとプルアップ他のモジュールを関与させずに機能をロードします。

2. プルダウン更新

プルダウン更新とは、ページのコンテンツがプルダウンされるとイベントがトリガーされ、サーバーから最新のデータが取得され、現在のページが置き換えられます。この章では、<uni-scroll-view> コンポーネントを使用して、uniapp にプルダウン更新機能を実装する方法を紹介します。

ページを開く

uniapp ページを開発する前に、まずプロジェクトツール Hbuilder X を入力し、新しい uniapp を作成する必要があります。 プロジェクトでは、プルダウン更新関数とプルアップ読み込み関数を実装したいので、最初に uni-ui コンポーネントライブラリを使用していることを確認する必要があるため、uni-ui-新しいプロジェクト選択ページを作成するときの ui。

コードを記述する

具体的な実装方法は次のとおりです。

注: サンプルコードは参考用であり、保証するものではありません。 100% 正確です。

index.vue コード:

<!-- 下拉刷新 -->
<uni-scroll-view
    class="content"
    :enable-back-to-top="true"
    @downRefresh="onDownRefresh" 
    refresher-default-style
    :refresher-triggered="isRefreshing"
    refresher-loading="{{isLoading}}"
    refresher-enabled="{{true}}"
    style="height:100vh;"
>
    <!--该区域可以放置需要下拉刷新的内容-->
    <!--......-->
    <div class="list-view">
        <ul>
            <li v-for="item in items" :key="item.id">{{item.text}}</li>
        </ul>
    </div>
</uni-scroll-view>

<script>
export default {
    data() {
        return {
            items: [
                {text: 'item1', id:1},
                {text: 'item2', id:2},
                {text: 'item3', id:3},
                {text: 'item4', id:4},
                {text: 'item5', id:5},
                {text: 'item6', id:6},
                {text: 'item7', id:7},
                {text: 'item8', id:8},
                {text: 'item9', id:9},
                {text: 'item10', id:10}
            ],
            isRefreshing: false,
            isLoading: false,
        }
    },
    methods: {
        onDownRefresh() {
            this.isRefreshing = true;
            setTimeout(() => {
                this.isRefreshing = false;
                uni.stopPullDownRefresh()
            }, 2000)
        },
    }
}
</script>

<style>
.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>

ログイン後にコピー

上記の手順を完了すると、プルダウンの更新機能を実装できます。具体的には、<uni-scroll-view> コンポーネントの downRefresh イベントを通じて実装されます。プルダウンがこのイベントをトリガーすると、isRefreshing## を設定します。 # から true まで、この時点で更新されたステータスが表示されます。時間が来たら、isRefreshing を false に設定し、uni.stopPullDownRefresh() を閉じます。

3. プルアップローディング

プルアップローディングモアとは、ページコンテンツが上に引き上げられると、サーバーからさらにデータを取得して最後に追加する関数がトリガーされることを意味します。ページの。この章では、uniapp の

<uni-scroll-view> コンポーネントを使用して、より多くのプルアップ読み込み機能を実現する方法を紹介します。

上記のコードにはすでにプルダウン更新関数が含まれているため、プルアップ読み込み関数のコードを上記のコードに追加するだけで済みます。コード。

<uni-scroll-view
    class="content"
    :enable-back-to-top="true"
    @downRefresh="onDownRefresh" 
    refresher-default-style
    :refresher-triggered="isRefreshing"
    refresher-loading="{{isLoading}}"
    refresher-enabled="{{true}}"
    @scrolltolower="loadMore" 
    :onLoadmore="false"
    style="height: 100vh;"
>
    <!--该区域可以放置需要下拉刷新的内容-->
    <!--......-->
    <div class="list-view">
        <ul>
            <li v-for="item in items" :key="item.id">{{item.text}}</li>
        </ul>
        <!--上拉加载-->
        <div v-if="isLoadMore">
            <span>loading...</span>
        </div>
    </div>
</uni-scroll-view>

<script>
export default {
    data() {
        return {
            items: [
                {text: 'item1', id:1},
                {text: 'item2', id:2},
                {text: 'item3', id:3},
                {text: 'item4', id:4},
                {text: 'item5', id:5},
                {text: 'item6', id:6},
                {text: 'item7', id:7},
                {text: 'item8', id:8},
                {text: 'item9', id:9},
                {text: 'item10', id:10}
            ],
            isRefreshing: false,
            isLoading: false,
            isLoadMore: false,
        }
    },
    methods: {
        onDownRefresh() {
            this.isRefreshing = true;
            setTimeout(() => {
                this.isRefreshing = false;
                uni.stopPullDownRefresh()
            }, 2000)
        },
        loadMore() {
            this.isLoadMore = true;
            setTimeout(() => {
                // 模拟从服务器获取了10个新数据
                for (let i=0; i<10; i++) {
                    const item = {
                        id: this.items.length + i + 1,
                        text: `item${this.items.length + i + 1}`
                    };
                    this.items.push(item);
                }
                this.isLoadMore = false;
            }, 2000)
        }
    }
}
</script>

<style>
.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
</style>

ログイン後にコピー

上記のコードに示すように、

<uni-scroll-view> コンポーネントの @scrollto lower イベントを通じてプルアップ読み込みを実装します。ページのコンテンツが一番下にスライドすると、this.loadMore() メソッドを呼び出します。このメソッドで、さらにデータを読み込んでページを更新できます。

最後に、

isLoadMore に true を設定すると、ページに「読み込み中」ステータスが表示されます。 2 秒待った後、items データに 10 個の新しいデータを追加し、isLoadMore 状態を閉じます。

4. 概要

この記事で紹介した方法により、より多くのプルダウン更新機能とプルアップ読み込み機能を uniapp にすばやく実装できます。この機能をまだ試していない場合は、この記事の手順に従ってすぐに使い始めて、モバイルアプリをさらに改善することができます。ご質問やご不明な点がございましたら、コメント欄に残してください。

以上がuniapp でプルダウン更新機能とプルアップロード機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。