WeChat 애플릿에서 데이터 스크롤 로딩을 구현하는 방법은 무엇입니까?

요약: 이벤트 기능을 동작시키기 위해서는 주로 concat 메소드를 사용하여 요청한 데이터를 병합한 후, 데이터를 추가하는 척하기 위해 for 루프를 사용했습니다.

사용해야 하는 구성 요소 및 API

scroll-view(스크롤 가능 보기 영역)

wx.showToast(OBJECT)는 메시지 프롬프트 창을 표시합니다.----필요한 속성을 표시합니다. 작은 국화를 로드하는 데 사용됩니다

스크롤 뷰에서는 높이를 지정해야 합니다. 이 높이는 사용자의 필요에 따라 계산할 수 있으며 기본적으로 한 페이지에 6을 표시합니다.

아래로 스크롤하여 트리거해야 하는 이벤트를 바인딩하세요

작업 이벤트 함수는 주로 concat 메서드를 사용하여 요청된 데이터를 병합한 다음 for 루프를 사용하여 데이터를 추가하는 척했습니다. .실제 프로젝트에서는 자체 Ajax로 대체할 수 있습니다. 로딩을 시뮬레이션하기 위해 1.5초를 추가했습니다. 타이머는 먼저 프롬프트 상자 API를 성공적으로 호출한 다음 성공적으로

lower() {
var result = this.data.res;
var resArr = [];
  //这里可以使用自己的ajax
for (let i = 0; i < 10; i++) {
resArr.push(i);
};
var cont = result.concat(resArr);//合并请求的数据
console.log(resArr.length);
if (cont.length >= 100) {
wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 
title: \&#39;我也是有底线的\&#39;,
icon: \&#39;success\&#39;,
duration: 300
});
return false;
} else {
wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中” 
title: \&#39;加载中\&#39;,
icon: \&#39;loading\&#39;,
});
setTimeout(() => {
this.setData({
res: cont
});
wx.hideLoading();
}, 1500)
}
}

복사할 수 있습니다. 그리고 전체 코드

js code

Page({
  /**
   * 页面的初始数据
   */
  data: {
    height: \'\',
    res: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  lower() {
    var result = this.data.res;
    var resArr = [];
    for (let i = 0; i < 10; i++) {
      resArr.push(i);
    };
    var cont = result.concat(resArr);
    console.log(resArr.length);
    if (cont.length >= 100) {
      wx.showToast({ //如果全部加载完成了也弹一个框
        title: \&#39;我也是有底线的\&#39;,
        icon: \&#39;success\&#39;,
        duration: 300
      });
      return false;
    } else {
      wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  
        title: \&#39;加载中\&#39;,
        icon: \&#39;loading\&#39;,
      });
      setTimeout(() => {
        this.setData({
          res: cont
        });
        wx.hideLoading();
      }, 1500)
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          height: res.windowHeight
        })
      }
    })
  }
})

를 실행하세요. 권장 사항: "

Mini 프로그램 개발 튜토리얼"

위 내용은 WeChat 애플릿에서 데이터 스크롤 로딩을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!