WeChatアプレットでのリストプルアップ読み込みの実装方法（コード付き）

この記事の内容は、WeChat アプレットのリスト プルアップ読み込みの実装コードに関するものです。必要な方は参考にしていただければ幸いです。

特定のページには 100 行などの複数のリストがあります。このとき、携帯電話のページング機能は、通常、下にスライドすると引き上げられて更新されます。

scroll-view を使用して実装します。bindscrollto lower メソッド: 下/右にスクロールするときにトリガーします。トリガーされると、新しいデータを取得するためのリクエストが送信されます。私が書いたとき、ユーザーに知らせるために showLoading ポップアップ ウィンドウを回転させたかったので、データは非常に迅速に取得されました。プルアップデータについて。追加しないとshowLoadingが点滅してしまうため、体感的には良くないと感じました。

最後に、scroll-view で垂直スクロールを使用する場合は、 に固定の高さ (高さ: 93%) を指定してから、その高さ (高さ: 100%) を設定する必要があります。ページ、そうでない場合は、bindscrollto lower をトリガーできません

<scroll-view wx:if="{{isShowList}}" class=&#39;scrollHeight&#39; scroll-y="true" bindscrolltolower="getMore" lower-threshold=&#39;3&#39;>
</scroll-view>

論理コードの一部を実行してください

  //上拉加载分页
  getMore(e){
    var that = this;
    var user = wx.getStorageSync('bizUser');
    wx.showLoading({
      title: '正在加载中',
    });
    setTimeout(function(){
      var pageindex = that.data.curPage;
      var student = that.data.student;
      if (pageindex>=1){
        ++pageindex;
      }
      wx.request({
        url: app.url + '',
        data: {
          schoolId: user.schoolId,
          pageSize: 10,
          curPage:pageindex
        },
        method: 'GET',
        success:function(res){
          if (res.data.data) {
            var studentLength = (res.data.data instanceof Array) ? res.data.data.length : 0;
            for (var i = 0; i < studentLength; i++) {
              //判断计时付或一次性
              if (res.data.data[i].sign_type == 2) {
                res.data.data[i].sign_type = &#39;一次性&#39;;
              } else if (res.data.data[i].sign_type == 1) {
                res.data.data[i].sign_type = &#39;计时付&#39;;
              } else if (res.data.data[i].sign_type == 3) {
                res.data.data[i].sign_type = &#39;计时付&#39;;
              } else if (res.data.data[i].sign_type == 4) {
                res.data.data[i].sign_type = &#39;一次性&#39;;
              } else if (res.data.data[i].sign_type = 5) {
                res.data.data[i].sign_type = &#39;一次性&#39;
              }

              //数字变中文
              if (res.data.data[i].learn_stage == 1) {
                res.data.data[i].learn_stage = &#39;一&#39;;
              } else if (res.data.data[i].learn_stage == 2) {
                res.data.data[i].learn_stage = &#39;二&#39;;
              } else if (res.data.data[i].learn_stage == 3) {
                res.data.data[i].learn_stage = &#39;三&#39;
              }
            }

            if (studentLength ==10) {
              for (var j = 0; j < studentLength;j++){
                student.push(res.data.data[j]);
              }
              that.setData({
                student: student,
                load: &#39;上拉加载更多..&#39;,
                curPage: pageindex
              })


            } else if (studentLength<10){
              for (var j = 0; j < studentLength; j++) {
                student.push(res.data.data[j]);
              }
              that.setData({
                student: student,
                load: &#39;已经没有更多了..&#39;,
                curPage: pageindex
              })
            }
          } else {
            that.setData({
              load: &#39;已经没有更多了&#39;
            })
          }
        }
      })

      wx.hideLoading();

    },500)

  },

以上がWeChatアプレットでのリストプルアップ読み込みの実装方法（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。