미니 프로그램에서 페이지를 새로 고치는 풀다운 기능을 어떻게 구현하나요?

미니 프로그램에서 페이지를 새로 고치는 풀다운 기능을 어떻게 구현하나요? 다음 문서에서는 WeChat 애플릿 인터페이스에서 풀다운 새로 고침을 구현하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

WeChat 미니 프로그램에서는 풀다운을 통해 페이지를 새로 고치는 것이 기본 작업입니다. 현재 페이지가 가득 차면 계속 풀다운하여 더 많은 콘텐츠를 로드할 수 있습니다. 미니 프로그램과 웹 페이지 모두 이 기능을 구현할 수 있습니다. 차이점은 미니 프로그램 인터페이스에는 시스템에서만 호출하면 되는 풀다운 새로 고침 기능을 구현할 수 있는 API가 있다는 것입니다.

WeChat 개발 문서를 보면 활성화PullDownRefresh 속성이 true로 설정되어 있음을 알 수 있습니다. 풀다운 새로 고침은 기본적으로 활성화되어 있습니다. 활성화PullDownRefresh는 app.json과 페이지의 xxx.json에 작성할 수 있습니다. 둘 사이의 차이점은 app.json이 전역 풀다운 새로 고침인 반면 ***.json은 단일 페이지 풀다운 새로 고침이라는 것입니다. 이 페이지의 윈도우 성능을 결정하는 구성 항목이므로 윈도우 키를 작성할 필요가 없습니다. 또 다른 방법은 스크롤 보기를 듣고 풀다운 새로 고침을 사용자 정의하는 것입니다. 스크롤 보기에 바인딩scrolltoupper 속성이 있으면 위쪽/왼쪽으로 스크롤할 때 scrolltoupper 이벤트가 트리거되므로 이 속성을 사용하여 구현할 수 있습니다. 풀다운 새로 고침 기능.

두 가지 방법을 모두 사용할 수 있습니다. 첫 번째 방법은 비교적 간단하고 사용하기 쉽습니다. 두 번째 방법은 풀다운 새로 고침 스타일을 사용자 정의하려는 소규모 프로그램에 적합합니다. 전자상거래에 대해 설명하겠습니다. 시스템에서 제공하는 첫 번째 것을 사용하세요. 주요 목적은 모든 사람에게 사용법을 가르치는 것입니다.

1. home.json 매개변수 구성

enablePullDownRefresh: true

새로고침을 위해 풀다운해야 하는 페이지는 해당 페이지에 해당하는 xxx.json 파일에서 위 속성을 구성하면 됩니다. 풀다운 새로 고침이 허용되는지 여부는 이 속성의 문자 그대로의 의미입니다. 물론 풀다운 새로 고침을 허용하도록 각 구성을 구성하지 않으려면 전역 창에서 위 속성을 직접 구성할 수 있습니다. app.json 변수는 전체 프로젝트에서 풀다운 새로 고침을 허용하도록 추가해야 합니다. 시스템 기본값에는 풀다운 새로 고침 기능이 없기 때문입니다.

home.js

//下拉刷新
onPullDownRefresh:function()
{
wx.showNavigationBarLoading() //在标题栏中显示加载
//模拟加载
setTimeout(function()
{
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
},1500);
},

onPullDownRefresh 풀다운 새로 고침 이벤트 모니터링 내부 코드를 살펴보세요. wx.showNavigationBarLoading() 및 wx.hideNavigationBarLoading()은 아직 네트워크 요청을 설명하지 않았기 때문에 표시 및 숨기기를 제어하는 ​​데 사용됩니다. , setTimeout 메소드를 통해 시간 지연 메소드를 작성했습니다. 이 메소드는 네트워크 로딩에 소요되는 시간을 시뮬레이션할 수 있으며, 완료하려면 풀다운 새로 고침 wx.stopPullDownRefresh()를 중지해야 합니다.

더 로드

더 로드하는 방법은 두 가지가 있습니다

1. 시스템 API를 호출합니다

2. 모니터 스크롤 뷰, 스크롤을 아래쪽으로 바인드

처리 방법 및 풀다운 새로 고침 약간 다르지만 거의 동일합니다.

home.js

onReachBottom: function () {
console.log(\'加载更多\')
setTimeout(() => {
this.setData({
isHideLoadMore:true,
recommends: [
{
goodId: 7,
name:\'.....\',
url: \'....\',
imageurl:\'......\',
},
{
goodId: 10,
name:\'......\',
url:\'......\',
},
],
})
}, 1000)
}

onReachBottom 시스템은 풀다운 새로 고침과 마찬가지로 일부 데이터를 시뮬레이션하고 디스플레이를 제어하고 로딩 제어를 숨기기 위한 사용자 정의 값인 시간 지연 이벤트 isHideLoadMore를 추가합니다.

home.wxml

Loading

미니 프로그램에서 풀다운 새로 고침을 구현하는 다른 방법이 있는데, 이는 H5 웹 페이지의 연습을 모방할 수 있지만 WeChat 미니 프로그램은 풀다운 새로 고침을 구현할 수 없습니다. API 인터페이스를 사용하면 개발자의 부담을 줄일 수 있습니다.

추천: "

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

위 내용은 미니 프로그램에서 페이지를 새로 고치는 풀다운 기능을 어떻게 구현하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!