クリックしてロードするその他の機能を uniapp に実装する方法

携帯電話業界の発展に伴い、モバイル アプリケーションの人気はますます高まり、複数端末での開発が一般的な手法になりました。これに基づいて、uniapp は iOS、Android、H5 などのプラットフォームを同時に開発できる開発フレームワークであることが判明しました。 uniapp で、クリックして読み込む回数を増やすにはどうすればよいでしょうか?

1. uni-list コンポーネントを使用する

Uni-list は、リストのレンダリングとスクロールを実装する uniapp によってカプセル化されたリスト コンポーネントです。 uni-list では、loadmore という追加属性が設定されており、下にスライドした後に次のページを自動的にロードできます。

まず、テンプレートに uni-list コンポーネントを定義し、loadmore 属性を true に設定します。コードは次のとおりです:

<template>
  <uni-list :loadmore="true" :loadtext="loadtext" @loadmore="getMoreData">
    <uni-list-item v-for="(item, index) in listData" :key="index">
      {{item}}
    </uni-list-item>
  </uni-list>
</template>

このうち、loadtext はロード時に表示されるテキストで、 getMoreData は、データの次のページを取得するために使用されるカスタム メソッドです。

次に、スクリプト内にデータ data と getMoreData メソッドを定義します。コードは次のとおりです:

<script>
  export default {
    data() {
      return {
        // 列表数据
        listData: [],
        // 加载时的文本提示
        loadtext: '正在加载...',
        // 当前页码
        currentPage: 1,
        // 每页展示数量
        pageSize: 10
      }
    },
    methods: {
      getMoreData() {
        // 发送请求获取下一页数据
        uni.request({
          url: 'https://example.com/getMoreData',
          data: {
            page: this.currentPage + 1,
            pageSize: this.pageSize
          },
          success: res => {
            // 将数据添加到列表中
            this.listData = this.listData.concat(res.data.list)
            // 将页码+1
            this.currentPage++
            // 如果没有更多数据了，显示已经到底部
            if (!res.data.hasMoreData) {
              this.loadtext = '没有更多了'
            }
          },
          fail: err => {
            console.log(err)
          }
        })
      }
    }
  }
</script>

getMoreData メソッドは、次のページのデータを取得するリクエストを送信する機能を実装し、データを取得したらリストに追加します。同時に、ロードするデータがもうない場合、loadtext は「no more」に設定されます。

2. カスタム ボタンで詳細の読み込みをトリガーする

uni-list のloadmore 属性を使用することに加えて、カスタム ボタンを使用してさらに多くの関数の読み込みをトリガーすることもできます。具体的な実装方法は以下の通りです。

まず、テンプレートにカスタム ボタンを追加して、さらに読み込みをトリガーします。コードは次のとおりです:

<template>
  <div>
    <uni-list :loadmore="false">
      <uni-list-item v-for="(item, index) in listData" :key="index">
        {{item}}
      </uni-list-item>
    </uni-list>
    <button @click="getMoreData">点击加载更多</button>
  </div>
</template>

このうち、uni-list のloadmore 属性は false に設定されています。自動ではないため、ボタンをクリックして手動で読み込みを開始する必要があります。

次に、スクリプトにデータ data と getMoreData メソッドを定義します。コードは次のとおりです:

<script>
  export default {
    data() {
      return {
        // 列表数据
        listData: [],
        // 当前页码
        currentPage: 1,
        // 每页展示数量
        pageSize: 10,
        // 是否有更多数据
        hasMoreData: true
      }
    },
    methods: {
      getMoreData() {
        // 发送请求获取下一页数据
        uni.request({
          url: 'https://example.com/getMoreData',
          data: {
            page: this.currentPage + 1,
            pageSize: this.pageSize
          },
          success: res => {
            // 将数据添加到列表中
            this.listData = this.listData.concat(res.data.list)
            // 将页码+1
            this.currentPage++
            // 如果没有更多数据了，隐藏按钮
            if (!res.data.hasMoreData) {
              this.hasMoreData = false
            }
          },
          fail: err => {
            console.log(err)
          }
        })
      }
    }
  }
</script>

getMoreData メソッドでは、次のページのデータを取得するリクエストも送信し、データを取得したらリストに追加します。データがなくなったら、ボタンが表示されなくなるように hasMoreData を false に設定します。

最後に、ボタンに v-if 判定を設定して、さらにデータがあるかどうかを判断する必要があります。コードは次のとおりです:

<button v-if="hasMoreData" @click="getMoreData">点击加载更多</button>

このようにして、ボタンをクリックできます。さらにデータを手動でロードします。

概要

この記事では、uniapp でクリックトゥロードを実現する 2 つの方法、つまり uni-list コンポーネントを使用する方法とカスタム ボタン トリガーを使用する方法を紹介します。いずれにせよ、これは基本的に、より多くのデータを取得してリストに追加するリクエストを送信する方法です。開発者にとって、どの実装方法を選択するかは、特定のシナリオに基づいて選択できます。

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