WeChat 애플릿 목록의 풀업 새로 고침 및 풀업 로딩
###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);
})
},
})
이 사이트의 모든 리소스는 네티즌이 제공하거나 주요 다운로드 사이트에서 재인쇄되었습니다. 소프트웨어의 무결성을 직접 확인하십시오! 이 사이트의 모든 리소스는 학습 참고용으로만 사용됩니다. 상업적 목적으로 사용하지 마시기 바랍니다. 그렇지 않으면 모든 결과에 대한 책임은 귀하에게 있습니다! 침해가 있는 경우 당사에 연락하여 삭제하시기 바랍니다. 연락처: admin@php.cn
관련 기사

29 Jul 2016
미니 프로그램: 미니 프로그램은 간단한 PHP 다중 이미지 업로드 미니 프로그램 코드입니다. 먼저 소스 코드를 업로드한 후 자신의 컴퓨터에 복사하여 실행할 수 있습니다. ~ 다음과 같이 코드를 복사하세요. <html> <meta http-equiv=" Content-Type" c method="post" enctype="multipart/form-data"> <input type="file" name="img[]" /><br /> <입력 유형

25 Jul 2016
WeChat 공개 플랫폼 소스 코드 Micropower WM_V2.0520 UTF8 버전 프로그램

04 Apr 2025
미니 프로그램 CSS 스타일 적응 문제 : 회전식 사진을 적응 형 컨테이너로 만드는 방법? 많은 개발자들이 미니 프로그램 개발에서 이미지 적응 문제에 직면하게됩니다. ...

29 Jul 2016
html 소스 코드: html 소스 코드 PHP에서 html 코드를 필터링하는 기능은 프로그램 보안을 향상시킵니다. 다음은 HTML 코드를 필터링하는 기능입니다. 다음과 같이 코드를 복사합니다. function ihtmlspecialchars($string) { if(is_array($string)) { foreach( $string as $key => $val) { $string[$key] = ihtmlspecialchars($val) } } else { $string = preg_replace

06 Mar 2025
Discover Pilet : 레트로 연료의 오픈 소스 미니 컴퓨터 클래식 스타일을 최첨단 기술과 혼합하는 미니 컴퓨터를 찾고 계십니까? Raspberry Pi 5가 구동하는 모듈 식 오픈 소스 놀라운 Pilet을 만나십시오. 7 시간의 배터리 수명을 자랑합니다.

06 Apr 2025
H5와 미니 프로그램 간의 지불 기능의 차이는 주로 다음 측면에 반영됩니다. 플랫폼 제한 사항 : H5는 모든 브라우저를 지원하고 미니 프로그램은 특정 플랫폼에서만 사용할 수 있습니다. 결제 프로세스 : H5는 타사 인터페이스를 호출하여 완료해야하며 미니 프로그램을 직접 호출 할 수 있습니다. 지불 경험 : H5 프로세스는 번거롭고 미니 프로그램 프로세스는 간단하고 매끄 럽습니다. 보안 : H5 보안은 브라우저 및 타사 플랫폼에 의존하며 미니 프로그램은 더 안전합니다. 마케팅 기능 : H5는 마케팅 요소를 포함시킬 수 있으며 미니 프로그램의 마케팅 기능은 플랫폼 정책에 따라 제한됩니다. 데이터 분석 : H5에는 데이터를 수집하기위한 타사 도구가 필요하며 Mini 프로그램 플랫폼은 풍부한 분석 도구를 제공합니다. 사용 시나리오 : H5는 크로스 플랫폼 결제에 적합하며 미니 프로그램은 특정 플랫폼 내에서 지불에 적합합니다.

11 Mar 2025
이 기사에서는 vue.js를 사용하여 단일 코드베이스에서 iOS, Android 및 미니 프로그램 앱을 구축하기 위해 크로스 플랫폼 프레임 워크 인 UNI-APP을 살펴 봅니다. Uni-App의 효율성, 사용 편의성 (특히 Vue.js 사용자) 및 광범위한 미니 프로그램 SUP를 강조합니다.

25 Jul 2016
모바일 CRM 기업 소스 코드, 모바일 OA 소스 코드, 휴대폰 컨퍼런스 소스 코드 풀 세트 판매

25 Jul 2016
판매용으로 완전히 맞춤화된 기업 인스턴트 메시징 소스 코드/영상 감시 소스 코드/화상 회의 소스 코드


뜨거운 도구

WeChat 미니 프로그램 데모: 이미테이션 몰
WeChat 미니 프로그램 데모: 쇼핑몰을 모방하고 시작하기 쉬우며 쇼핑몰의 몇 가지 기본 기능을 잘 소개합니다.

요점: 앵커와 유사한 기능 구현
모든 사람에게 필요한 유사한 앵커 기능입니다. 또한 일부 테이크아웃 앱의 일반적인 주문 기능도 구현합니다.

WeChat 미니 프로그램 데모: Lezhu
WeChat 미니 프로그램 데모: Lezhu: 위치 기반과 유사하며 Zhang Xiaolong의 미니 프로그램 정신과 다소 유사합니다.

WeChat 미니 프로그램 게임 데모에서는 다양한 색상 블록을 선택합니다.
WeChat 미니 프로그램 게임 데모에서는 다양한 색상 블록을 선택합니다.

WeChat 애플릿 데모: 캐러셀 이미지 변환
캐러셀 차트 스타일 변경, 작은 프로그램으로 구현한 간단한 캐러셀 차트, 작성이 쉽습니다.
