WeChat 애플릿에서 롤링 데이터 로딩 방법 소개-미니 프로그램 개발-php.cn

WeChat 애플릿에서 롤링 데이터 로딩 방법 소개

青灯夜游

풀어 주다： 2020-04-07 09:20:34

앞으로

3217명이 탐색했습니다.

작업 이벤트 함수는 주로 concat 방식을 사용하여 요청한 데이터를 병합한 다음 값을 할당합니다. 실제 프로젝트에서는 데이터를 추가하는 척하기 위해 for 루프를 사용했습니다.

사용해야 합니다. 구성 요소 및 API

WeChat 애플릿에서 롤링 데이터 로딩 방법 소개 scroll-view(스크롤 가능 영역)

wx.showToast(OBJECT)는 메시지 프롬프트 창을 표시합니다. ---- 로딩에 필요한 속성을 표시합니다.

스크롤 - 보기는 높이를 지정해야 합니다. 이 높이는 사용자의 필요에 따라 계산할 수 있습니다. 저는 화면의 사용 가능한 높이를 사용하며 기본적으로 한 페이지에는 6

WeChat 애플릿에서 롤링 데이터 로딩 방법 소개

아래로 스크롤하여 필요한 이벤트를 바인딩합니다. to be Trigger

WeChat 애플릿에서 롤링 데이터 로딩 방법 소개 작업 이벤트 함수는 요청한 데이터를 concat 메소드를 사용하여 병합한 후 값을 할당하는 것인데, 실제 프로젝트에서는 데이터를 추가하는 척을 했는데요. 내 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: \&#39;\&#39;,
    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
        })
      }
    })
  }
})

로그인 후 복사