WeChat 애플릿 스크롤 보기 구성 요소는 목록 페이지 예제 코드를 구현합니다.

스크롤뷰 컴포넌트 소개

스크롤뷰는 위챗 애플릿에서 제공하는 스크롤뷰 컴포넌트로, 모바일에서 흔히 볼 수 있는 풀업 로딩과 풀다운 목록 새로고침이 주요 기능입니다. 이 구성 요소의 사용법을 설명하기 위해 270e03c956223262b2a0bcf239a34060를 예로 들어 보겠습니다.

앱에 대한 새 페이지 가져오기

먼저 미니 프로그램 페이지 페이지에서 프로젝트 루트 디렉터리에 있는 app.json 프로젝트 구성 파일을 열고 내부의 페이지 배열에 "pages/allJoke/allJoke"를 추가한 다음 하단 탐색을 설정하고 목록에

{
  "text": "列表",
  "pagePath": "pages/allJoke/allJoke",
  "iconPath": "images/note.png",
  "selectedIconPath": "images/noteHL.png"
 },

특정 구성의 의미를 알고 싶다면 미니 프로그램 구성 문서를 참조하세요. 여기서는 자세히 설명하지 않겠습니다!

json 구성 페이지

다음 단계는 새 페이지의 구성 페이지입니다. alljoke와 같은 페이지 디렉터리 아래에 새 디렉터리를 만들고 이 디렉터리에 새 allJoke.json을 만듭니다.

{
  "navigationBarTitleText": "笑话集锦",
  "enablePullDownRefresh": true
}

나중에 풀다운 새로 고침을 수행할 때 애플릿을 사용해야 하기 때문에 onPullDownRefresh 메소드가 제공되므로 구성 항목에서 활성화해야 합니다. 마음대로 설정할 수 있는 페이지의 상단 제목입니다!

wxml 보기 페이지

다음은 보기 페이지 차례입니다. 마찬가지로 alljoke에서 새 alljoke.wxml 페이지를 만듭니다. 디렉토리.wxml은 미니 프로그램으로 생성된 뷰 페이지 문서 형식으로 작성 방법은 html과 유사하며, 더 자세히 알고 싶으면 wxml 문서를 읽어보면 된다. 또한 다음 코드를 alljoke.wxml

<view>
 <view>
  <scroll-view class="scroll" scroll-top="{{scrollTop}}" style="height:580px;" scroll-y="true" bindscroll="scrll"  bindscrolltolower="loadMore">
   <view class="block" wx:for="{{listLi}}" wx:for-item="item">
    <text>{{item.text}}</text>
   </view>  
  </scroll-view>
 </view>
 <view class="top" hidden="{{hidden}}" catchtap="goTop">⇧</view>
</view>

보시다시피 여기에도 우리의 주인공 스크롤 뷰가 멋지게 등장합니다. 여기에 가져온 것은 긴 구성 목록입니다.

사용된 옵션이 모두 나열되어 있으며, 특별히 주의해야 할 사항이 하나 더 있습니다:

세로 사용 스크롤 막대를 이동할 때 구성 요소의 높이를 고정해야 합니다. 이는 위의 코드 스타일에서 설정한 높이입니다.

자세한 내용은 WeChat 애플릿 스크롤 보기를 참조하세요! 컴포넌트 문서

wxss 스타일

마찬가지로 alljoke 디렉토리에 새로운 allJoke.wxss 파일을 생성합니다. 미니 프로그램의 스타일은 기존 CSS의 스타일과 유사합니다. 여기는 그냥 보기 흉한 스타일로 만들어놨으니 그냥 쓰셔도 됩니다. (제목 외래어: 참을 수 없어서 혼자서 음식과 옷을 충분히 만들어요)

.block {
  border: 8px solid #71b471;
  margin: 20rpx 20rpx;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 20rpx;
  text-align: center;
}
.top {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: #fff;
  position: fixed;
  bottom: 40rpx;
  right: 20rpx;
  text-align: center;
  font-size: 50rpx;
  opacity: .8;
  border-radius: 50%;
  border: 1px solid #fff; 
}

미니 프로그램 문서의 스타일 소개

논리 부분

마지막이자 가장 중요한 논리 부분입니다! 기존 규칙은 alljoke 디렉터리에 새 allJoke.js 파일을 만드는 것입니다. 코드를 먼저 작성한 다음 천천히 설명하세요.

Page({
 data:{
  listLi:[],
  page:1,
  scrollTop:0,
  done: false,
  hidden: true
 },
 onLoad:function(options){
  this.getList(1);
 },
 
 onPullDownRefresh: function(){
  wx.showToast({
   title: '加载中',
   icon: 'loading'
  });
  this.getList(1,true);
 },
 
 getList: function(page, stopPull){
  var that = this
  wx.request({
   url: 'https://wechat.sparklog.com/jokes',
   data: {
    page: page,
    per: '20'
   },
   method: 'GET', 
   success: function(res){
    if(page===1){
     that.setData({
      page: page+1,
      listLi: res.data,
      done: false
     })
     if(stopPull){
      wx.stopPullDownRefresh()      
     }
    }else{
     if(res.data<20){
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data),
       done: true
      }) 
     }else{
      that.setData({
       page: page+1,
       listLi: that.data.listLi.concat(res.data)
      }) 
     }  
    }
   },
  })
 },
 
 loadMore: function(){
  var done = this.data.done;
  if(done){
   return
  }else{
   wx.showToast({
    title: &#39;加载中&#39;,
    icon: &#39;loading&#39;,
    duration: 500
   });
   var page = this.data.page;
   this.getList(page)
  }
 },
 
 scrll: function(e){
  var scrollTop = e.detail.scrollTop
  if(scrollTop>600){
   this.setData({
    scrollTop: 1,
    hidden: false   
   })
  }else{
   this.setData({
    scrollTop: 1,
    hidden: true 
   });
  }
 },
 
 goTop: function(){
  this.setData({
   scrollTop:0,
   hidden: true
  })
 }
})

보시다시피 먼저 page() 함수를 사용하여 페이지를 등록한 다음 onLoad 초기화 데이터에 일부를 정의해야 합니다. 페이지가 로드될 때 호출되는 이 페이지의 수명 주기 함수. 페이지가 로드될 때 사용자 정의 getList 함수를 호출했습니다. 이 함수는 두 개의 매개변수를 받습니다. 첫 번째 매개변수는 로드할 페이지이고, 두 번째 매개변수는 풀다운 새로 고침을 위해 함수가 호출되는지 아니면 페이지가 로드될 때 호출되는지를 결정하는 데 사용되는 부울 값입니다. 다음으로, onPullDownRefresh는 애플릿에서 제공하는 풀다운 새로 고침 함수입니다. 메시지 프롬프트 상자를 표시합니다. LoadMore는 하단으로 스크롤할 때 발생하는 이벤트입니다. 모든 목록 항목이 로드되었는지 확인합니다. 데이터베이스에 아직 목록 항목이 있으면 아래로 당겨서 로드하세요. 스크롤 기능은 스크롤 막대 위치를 결정하는 기능입니다. 600보다 크면 아래쪽으로 가는 버튼이 표시됩니다. 600보다 작으면 위쪽으로 가는 버튼이 숨겨집니다. 스크롤바의 매개변수입니다. 방금 세로 스크롤 막대 위치 스크롤 상단 설정 항목을 설정할 때 스크롤 뷰 구성 요소에 대해 설명했습니다. 매개 변수가 동일하면 페이지가 다시 렌더링되지 않습니다. 상단에 도달하려면 위치가 '0'이어야 합니다. 스크롤 기능이 반복적으로 실행되므로 위치 정보를 '1'로 설정합니다. 즉, 위치 설정으로 인해 매개변수가 모두 '1'로 설정되어 있어 goTop 기능이 바로 상단으로 이동(매개변수를 '0'으로 변경)하여 스크롤톱 설정 항목이 적용되지 않게 됩니다. 기회 제공) 마지막으로 상단 버튼으로 바로 이동하는 기능이 있는데, 보시다시피 위치 정보를 '0'으로 변경하고, 파라미터 스크롤 상단 설정을 변경하여 적용한 후 페이지로 바로 이동하는 기능이 있습니다. 마지막으로 숨겨진 매개변수를 변경하여 자신을 숨깁니다(상단으로 바로 이동하는 버튼). 풀업 로드 목록 페이지의 새로고침 기능을 보면 WeChat에서 제공하는 인터페이스와 API가 상당히 포괄적이라는 것을 알 수 있습니다. 일반적으로 기본 js 구현보다 간단합니다! 🎜>읽어주셔서 감사합니다. 모든 사람에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

WeChat 애플릿 스크롤뷰 구성요소 구현 목록 페이지 예제 코드와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!