미니 프로그램은 페이지에 데이터를 로드하는 기능을 어떻게 구현합니까?

미니 프로그램은 페이지 단위로 데이터를 불러오는 기능을 어떻게 구현하나요? 다음 기사에서는 이를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

QQ, Weibo, 뉴스 등 대용량 데이터가 포함된 애플리케이션을 사용하면 페이지 로딩 기능을 자주 접하게 됩니다. 다양한 애플리케이션 시나리오가 있을 뿐만 아니라 사용자 경험도 향상됩니다. WeChat 미니 프로그램은 페이지에 데이터를 로드할 수도 있습니다. 이 기사에서는 WeChat 미니 프로그램에서 페이지 로딩 데이터를 만드는 방법을 소개합니다.

이러한 기능을 구현하려면 일반적으로 데이터를 요청할 때 현재 요청된 페이지 수와 페이지 크기(각 페이지에 표시되는 수)를 추가해야 합니다. 일부 인터페이스에서는 요청된 시작 오프셋을 통해 데이터를 요청하기도 합니다. 예를 들어, 한 페이지에 10개의 데이터를 표시하는 경우 첫 번째 요청(첫 번째 페이지)은 0으로 시작하여 9로 끝나고 두 번째 페이지는 10부터 19까지가 됩니다. 페이징 로딩 기능을 구현하고 싶기 때문에 가장 중요한 것은 풀다운 및 풀업 이벤트 처리입니다. 풀업 및 풀다운 트리거 이벤트는 다음과 같이 WeChat 애플릿에 캡슐화되었습니다.

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},

WeChat 애플릿을 처음 사용하시는 분들은 문제가 발생할 것입니다. 풀업 및 풀다운 기능을 다시 작성하는 이유는 무엇입니까? 풀업 또는 풀다운할 때 함수가 다시 호출되지 않는 이유는 무엇입니까? 당황하지 마십시오. 이 두 함수를 다시 작성하는 것 외에도 json 구성 파일에 다음 코드를 추가해야 하기 때문입니다

{
enablePullDownRefresh: true
}

위 코드를 사용하면 위 또는 아래로 당길 때마다 해당 함수가 트리거됩니다. .

데이터에 데이터 만들기

data: {
page: 1,
pageSize: 30,
hasMoreData: true,
contentlist: [],
},

page는 데이터를 요청할 때의 현재 페이지, pageSize는 각 페이지의 데이터 크기, hasMoreData는 가져올 때 계속 데이터를 요청하는 데 사용됩니다. 즉, 더 많은 데이터가 있습니까? 데이터. 네트워크 요청 데이터가 성공했을 때 요청한 데이터의 길이가 pageSize: 30보다 작으면 더 이상 데이터가 없다는 뜻이고 hasMoreData를 false로 변경하면 요청한 데이터 길이가 30이면 더 많은 데이터가 있다는 의미입니다. hasMoreData가 영구적으로 변경되고 페이지 번호가 1씩 증가합니다. 페이지가 풀다운되면 페이지가 먼저 1로 변경된 다음 데이터 쿼리가 성공하면 데이터가 쿼리됩니다. 페이지가 1이면 얻은 데이터가 콘텐츠 목록에 직접 할당됩니다. 페이지 수가 1보다 크면 요청된 데이터가 콘텐츠 목록에 추가됩니다. 이러한 방식으로 페이징 로딩 기능을 구현할 수 있습니다.

위의 분석을 통해 페이징 로딩 구현에 대해 명확하게 이해하였으므로 다음에는 코드 구현에 대해 소개하겠습니다.

getMusicInfo: function (message) {
var that = this
var data = {
showapi_appid:\'25158\',
showapi_sign:\'c0d685445898438f8c12ee8e93c2ee74\',
keyword: \'我\',
page:that.data.page
}
network.requestLoading(\'https://route.showapi.com/213-1\', data, message,function (res) {
console.log(res)
var contentlistTem= that.data.contentlist
if(res.showapi_res_code == 0) {
if(that.data.page == 1) {
contentlistTem= []
}
var contentlist =res.showapi_res_body.pagebean.contentlist
if(contentlist.length < that.data.pageSize) {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:false
})
} else {
that.setData({
contentlist:contentlistTem.concat(contentlist),
hasMoreData:true,
page:that.data.page + 1
})
}
} else {
wx.showToast({
title: res.showapi_res_error,
})
}
}, function (res) {
wx.showToast({
title: \&#39;加载数据失败\&#39;,
})
})
},

위 함수는 음악 목록 정보를 얻기 위한 요청 처리 로직입니다. 이 함수에는 데이터를 로드할 때 프롬프트 정보를 표시하는 데 사용되는 매개변수 메시지가 있습니다. 그리고 끌어올 때 프롬프트가 더 많은 데이터를 로드할 때.

그럼 페이지 진입 시, 즉 onLoad 함수에서 일단 데이터 로딩을 시작하면 다음과 같습니다

onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
var that = this
that.getMusicInfo(\'正在加载数据...\')
},

그러면 풀업과 드롭다운 기능의 구현은 다음과 같습니다

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:function () {
this.data.page = 1
this.getMusicInfo(\'正在刷新数据\')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
if(this.data.hasMoreData) {
this.getMusicInfo(\'加载更多数据\')
} else {
wx.showToast({
title: \'没有更多数据\',
})
}
},

페이징 기능을 더 잘 할 수 있습니다 사용자에게 콘텐츠를 표시하고 사용자를 유지합니다. 요즘 미니 프로그램은 사용자가 정보를 얻을 수 있는 새로운 채널입니다. 많은 미니 프로그램에는 이미 페이징 기능이 있습니다. 제대로 처리하지 않으면 데이터 손실과 불필요한 손실이 발생할 수 있습니다.

추천: "

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

위 내용은 미니 프로그램은 페이지에 데이터를 로드하는 기능을 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!