WeChat 애플릿 목록의 풀다운 새로 고침 및 풀업 로딩 구현 방법 분석

이 문서의 예에서는 WeChat 애플릿 목록 렌더링 기능의 목록 풀다운 새로 고침 및 풀업 로딩 구현 방법을 설명합니다. 자세한 내용은 다음과 같습니다.

WeChat 애플릿에는 2017년 1월 9일에 대한 특별 라벨이 있으며, 최근에는 인터넷과 친구들 사이에서 빠르게 인기를 얻었습니다. 데모 프로그램을 사용해 보세요. WeChat 애플릿은 vuejs와 다소 유사합니다. 둘 다 데이터 기반 보기 및 단방향 데이터 바인딩이며, 이는 WeChat 환경 지원과 모든 페이지를 동시에 로드하는 처리 덕분입니다. 처음으로 달릴 때의 시간. 이 글에서는 아래로 당겨 새로고침하고 위로 스와이프하여 WeChat 미니 프로그램 목록을 로드하는 방법을 공유합니다.

Renderings

먼저 프로그램 렌더링을 살펴보겠습니다. 다음 4개의 그림은 왼쪽에서 오른쪽으로 아래 새로 고침 애니메이션, 풀다운 새로 고침 결과, 위로 스와이프 로딩 애니메이션 및 위로 스와이프 로딩 결과입니다. 프로그램 내 데이터는 모두 시뮬레이션된 데이터이며 네트워크 요청을 포함하지 않으므로 직접 실행할 수 있습니다.

방법 1: 스크롤 뷰 컴포넌트를 사용하여 구현

이 구현 방법은 최종적으로 선택되지 않았으므로(풀다운 새로 고침에 버그가 있음) 간략하게 소개하겠습니다. 물론 드롭다운 새로 고침이 필요하지 않다면 스크롤 -view 구성 요소는 목록 렌더링에 매우 편리합니다. 공식 문서를 보면 스크롤 보기 구성 요소가 프로그래밍에 큰 편의를 제공하기 위해 다음과 같은 방법을 통합하고 있음을 알 수 있습니다.

scroll-into-view String 값은 특정 하위 요소 ID여야 하며 해당 요소로 스크롤하고 요소의 상단이 스크롤 영역의 상단과 정렬됩니다.
bindscrolltoupper EventHandle 스크롤할 때 위쪽/왼쪽으로 스크롤하면 scrolltoupper event
bindscrolltolower가 실행됩니다. EventHandle 아래쪽/오른쪽으로 스크롤하면 scrolltolower 이벤트
bindscroll EventHandle가 실행됩니다event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

방법 2 : 사용 페이지와 함께 제공되는 함수

Page() 페이지를 등록하는 함수 . 페이지의 초기 데이터, 수명 주기 기능, 이벤트 처리 기능 등을 지정하는 개체 매개변수를 허용합니다.

1. 창 전경색을 어둡게 설정하고 app.json 페이지에서 드롭다운을 허용합니다

"window":{
  "backgroundTextStyle":"dark",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTitleText": "wechat",
  "navigationBarTextStyle":"white",
  "enablePullDownRefresh": true
}

2.list.json 페이지에서 드롭다운을 설정합니다

{
  "enablePullDownRefresh": true
}

3. 사용자의 풀다운 동작을 모니터링하려면 onPullDownRefresh를 사용하세요.

참고: 스크롤 뷰를 스크롤하면 페이지가 다시 되돌아오는 것이 방지되므로 스크롤 뷰에서 스크롤할 수 없습니다. onPullDownRefresh를 트리거하므로 스크롤 뷰 구성 요소를 사용할 때 페이지를 사용할 수 없습니다.

onPullDownRefresh: function() {
 wx.showNavigationBarLoading() //在标题栏中显示加载
 let newwords = [{message: '从天而降',viewid:'-1',time:util.formatTime(new Date),greeting:'hello'}].concat(this.data.words);
 setTimeout( ()=> {
   this.setData({
     words: newwords
   })
   wx.hideNavigationBarLoading() //完成停止加载
   wx.stopPullDownRefresh() //停止下拉刷新
  }, 2000)
}

4. onReachBottom을 사용하여 페이지 하단 이벤트를 불러옵니다.

참고: 처음 페이지에 들어갈 때 페이지가 한 화면으로 가득 차지 않으면 onReachBottom이 사용자가 적극적으로 끌어올릴 때만 트리거되어야 합니다. 손가락을 위로 당기면 onReachBottom이 여러 번 트리거됩니다. 프로그래밍할 때 이 두 가지 사항을 고려해야 합니다.

onReachBottom:function(){
  console.log('hi')
  if (this.data.loading) return;
  this.setData({ loading: true });
  updateRefreshIcon.call(this);
  var words = this.data.words.concat([{message: '土生土长',viewid:'0',time:util.formatTime(new Date),greeting:'hello'}]);
  setTimeout( () =>{
    this.setData({
     loading: false,
     words: words
    })
  }, 2000)
 }
})

5. 업스트로크 로딩 아이콘 애니메이션

/**
 * 旋转刷新图标
 */
function updateRefreshIcon() {
 var deg = 0;
 console.log('旋转开始了.....')
 var animation = wx.createAnimation({
  duration: 1000
 });
 var timer = setInterval( ()=> {
  if (!this.data.loading)
   clearInterval(timer);
  animation.rotateZ(deg).step();//在Z轴旋转一个deg角度
  deg += 360;
  this.setData({
   refreshAnimation: animation.export()
  })
 }, 2000);
}

최종적으로 첨부된 레이아웃 코드:

<view wx:for="{{words}}" class="item-container">
  <view class="items">
    <view class="left">
       <view class="msg">{{item.message}}</view>
       <view class="time">{{item.time}}</view>
    </view>
    <view class="right">{{item.greeting}}</view>
  </view>
</view>
<view class="refresh-block" wx:if="{{loading}}">
 <image animation="{{refreshAnimation}}" src="../../resources/refresh.png"></image>
</view>

관련 권장 사항:

JS 페이지 새로 고침 방법 요약

버튼 클릭 후 자동 페이지 새로 고침 문제에 대해

Javascript에서 페이지 새로 고침 예시에 대한 자세한 설명

위 내용은 WeChat 애플릿 목록의 풀다운 새로 고침 및 풀업 로딩 구현 방법 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!