WeChat 애플릿 목록의 풀업 새로 고침 및 풀업 로딩

##1.여러 구성요소 소개

###1.1 스크롤뷰 컴포넌트

여기에 사진 설명을 적어주세요

참고: 세로 스크롤을 사용하는 경우 고정 높이를 제공하고 WXSS를 통해 높이를 설정해야 합니다. ###1.2 이미지 컴포넌트

여기에 사진 설명을 적어주세요

참고: 모드에는 12개의 모드가 있으며 그 중 3개는 확대/축소 모드이고 9개는 자르기 모드입니다. ###1.3 아이콘 구성요소 여기에 그림 설명을 작성하세요

iconType: [ '성공', '정보', '경고', '대기', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', '다운로드', 'info_circle' , '취소', '검색', '삭제' ]

2. 목록 풀업 로딩 및 풀다운 새로 고침 구현

##2.1 먼저 렌더링을 하고 여기에 그림 설명을 쓰겠습니다 ##2.2 논리는 매우 간단합니다. 코드 ###2.2.1detail.wxml 레이아웃 파일을 업로드하기만 하면 됩니다

<loadinghidden="{{hidden}}"bindchange="loadingChange">
로드 중...
</로드 중> <scroll-view 스크롤-y="true" 스타일="높이: 100%;" 바인딩scrolltolower="loadMore" 바인딩스크롤toupper="refesh">
<wx:if="{{hasRefesh}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
<icon type="waiting" size="45"/><text>새로고침 중...</text></view>
<wx:else style="display:none" 보기 ><text></text></view>
<view class="lll" wx:for="{{list}}" wx:for-item="item" bindtap="bindViewTap"
          data-title="{{item.title}}" >
<image style=" 너비: 50px;높이: 50px;여백: 20rpx;" src="{{item.firstImg}}" ></image>
<view class="eee"
<view style="margin:5px;font-size:8px"> 제목:{{item.title}}</view>
<view style="margin:5px;color:red;font-size:6px"> 출처:{{item.source}}</view>
              </보기>
</보기>
<view class="tips1">
<wx:if="{{hasMore}}" style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
<icon type="waiting" size="45"/><text>로드 중...</text></view>
<wx 보기:else><text>더 이상 콘텐츠가 없습니다</text></view>
</보기>
</스크롤 보기>

###2.2.1 Detail.js 로직 코드 파일


var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
페이지({
데이터:{
// 텍스트:"페이지입니다"
목록:[],
dd:'',
숨김:거짓,
페이지: 1,
크기: 20,
더 있음:사실,
hasRefesh:false
},
onLoad:함수(옵션){
var that = this;
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
Network_util._get(url,
함수(res){
That.setData({
목록:res.data.result.list,
숨김: 사실,
});
},함수(res){
console.log(res);
});
},
onReady:함수(){
// 페이지 렌더링 완료
},
onShow:함수(){
// 페이지 표시
},
onHide:함수(){
// 페이지 숨김
},
onUnload:함수(){
//페이지 닫힘
},
//클릭이벤트 처리
BindViewTap: 함수(e) {
console.log(e.currentTarget.dataset.title);
},
//더 로드
loadMore: 함수(e) {
var that = this;
That.setData({
hasRefesh:true,});
(!this.data.hasMore)가 반환되는 경우
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
Network_util._get(url,
함수(res){
That.setData({
목록: that.data.list.concat(res.data.result.list),
숨김: 사실,
HasRefesh:false,
});
},함수(res){
console.log(res);
})
},
//새로고침 처리
새로고침: 함수(e) {
var that = this;
that.setData({
hasRefesh:사실,
});
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
Network_util._get(url,
함수(res){
That.setData({
목록:res.data.result.list,
숨김: 사실,
페이지:1,
       hasRefesh:false,
    });
    },함수(res){
     console.log(res);
 })
},
})