위 챗 애플 릿 에서 로드 기능 예제 구현[더 많은 데 이 터 를 불 러 옵 니 다/바닥 에 불 러 옵 니 다/클릭 하여 더 많은 데 이 터 를 불 러 옵 니 다]

이 글 의 사례 는 위 챗 애플 릿 이 상 라 로드 기능 을 실현 하 는 것 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
개발 수요
페이지 에 들 어가 서 초기 데 이 터 를 불 러 옵 니 다.페이지 를 아래로 끌 어 올 리 면 새로운 데 이 터 를 자동 으로 불 러 옵 니 다.즉,더 많은 데 이 터 를 불 러 옵 니 다.

시범 을 보이다

index.wxml

<!--      -->
<view wx:for="{{listdata}}" wx:key="listdata" class='listitem'>
 <view class='title'>{{item.title}}</view>
 <view class='title'>  ID:{{item.id}}</view>
 <image src="{{item.coverimg}}" class='cover'></image>
</view>

<!--             ，         -->
<view class="load-more-wrap">
<block wx:if="{{hasMore}}">
 <view class="load-content">
 <text class="weui-loading"/><text class="loading-text">     </text>
 </view>
</block>
<!--             -->
<block wx:else>
 <view class="load-content">
 <text>       </text>
 </view>
</block>
</view>

index.js

Page({
 data: {
 listdata:[], //  
 moredata: '',
 p:0, //    ；     
 hasMore:true //  
 },

 //      
 onLoad: function (options) {
 var that = this;

 //    
 var p = that.data.p;
 this.loadmore();
 },

 //    
 onReachBottom:function(){
 var that = this;
 //            
 var moredata = that.data.moredata;
 //    ，     
 if (moredata.more != 0) {
  this.loadmore();
  //     ，     ，         
 }else{
  that.setData({
  "hasMore": false
  })
 }
 },

 //    
 loadmore:function(){

 //    
 wx.showLoading({
  title: '   ',
 })

 var that = this;
 //    
 var p = ++that.data.p;

 //     
 wx.request({
  url: '     /server.php?page=' + p,
  data: {
  "json": JSON.stringify({
   "p": p
  })
  },

  method: 'POST',
  header: {
  'content-type': 'application/x-www-form-urlencoded'
  },

  //    ，    
  success:function(res){
  
  //      
  wx.hideLoading();

  //        
  if (res.data != 0) {
   that.setData({
   //               
   "listdata": that.data.listdata.concat(res.data), //    
   "moredata": res.data,
   "p":p
   })
  } else {
   that.setData({
   "hasMore":false
   })
  }
  }
 })
 }
})

설명 하 다.
1.url 은 서버 링크 로 변경 되 었 습 니 다.형식 은?
http:도 메 인 이름/디 렉 터 리/?page=쪽 번호
예 를 들 면:
http://www.baidu.com/api/data.php?page=1
페이지 번 호 는 가 변 적 이기 때문에 변수 p 를 설명 하기 때문에
`url: 'http://www.baidu.com/api/data.php?page' + p,`
index.wxss

.listitem{
 width: 90%;
 height: 155px;
 background: rgba(0, 0, 0, 0.2);
 margin:10px auto;
 text-align: center;
 position: relative;
 color:#fff;
}

.listitem .cover{
 width:100%;
 height:155px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: -100;
}

.load-more-wrap .load-content{
 text-align: center;
 margin:30px auto 30px;
 color:#ccc;
 font-size: 15px;
}

서버 에서 되 돌아 오 는 데이터 형식
json 배열 의 형식 을 되 돌려 줍 니 다.예 를 들 어

[
 {"id":"1","title":"  1","coverimg":"url1"},
 {"id":"2","title":"  2","coverimg":"url2"},
 {"id":"3","title":"  3","coverimg":"url3"},
 {"id":"4","title":"  4","coverimg":"url4"},
 {"id":"5","title":"  5","coverimg":"url5"}
]

본 논문 에서 말 한 것 이 여러분 의 위 챗 애플 릿 디자인 에 도움 이 되 기 를 바 랍 니 다.