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

이 글에서는 WeChat 애플릿에서 목록의 풀업 로딩 및 풀다운 새로 고침을 구현하는 방법을 주로 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터와 함께 살펴보시죠

위챗 미니 프로그램은 9월 21일 이후 가장 핫한 용어라고 할 수 있습니다. 일단 등장하고 나서 정말 모든 개발자들이 걱정하는 게 바로 위챗 미니 프로그램입니다. Android 개발자로서 저는 Android의 등장으로 인해 모바일 앱이 전복되고 모바일 프로그래머가 실업자가 될 것이라고는 생각하지 않습니다. 설사 그렇게 되더라도 이를 달성하기 위해서는 1~2년의 전환과 다듬기가 필요할 것입니다.

WeChat 미니 프로그램이 오늘날의 모바일 개발 환경을 뒤집을 수 있는지 여부에 관계없이 우리는 받아들이고 배우는 긍정적인 태도를 가져야 합니다. 우리는 새로운 기술을 배제하지 않으므로 먼저 WeChat 애플릿 개발 도구를 빠르게 구축하는 것보다 행동하는 것이 좋습니다. 그러면 목록의 풀업 로딩 및 풀다운 새로 고침 구현(집계 데이터 플랫폼을 통해 WeChat 뉴스 가져오기)을 시작해 보겠습니다.

1. 여러 컴포넌트 소개

1.1 스크롤 뷰 컴포넌트

참고: 세로 스크롤을 사용할 때는 고정 높이를 제공하고 WXSS를 통해 높이를 설정해야 합니다.

1.2 이미지 구성 요소

참고: 모드에는 12개의 모드가 있으며 그 중 3개는 크기 조정 모드이고 9개는 자르기 모드입니다.

1.3 아이콘 컴포넌트

iconType: [ 
‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', 
‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', 
‘info_circle', ‘cancel', ‘search', ‘clear' 
]

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

2.1 첫 번째 렌더링 잉

2.2 논리는 매우 간단합니다. 코드만 입력하면 됩니다.

2.2.1detail.wxml 레이아웃 파일

<loading hidden="{{hidden}}" bindchange="loadingChange">
 加载中...
 </loading> 
 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh">
 <view 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>
 <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=" width: 50px;height: 50px;margin: 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>
</view>
<view class="tips1">
 <view 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>
 <view wx:else><text>没有更多内容了</text></view>
 </view>
 </scroll-view>

2.2.1detail.js 로직 코드 파일

var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
Page({
 data:{
 // text:"这是一个页面"
 list:[],
 dd:'',
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false
 },
 onLoad:function(options){
 var that = this;
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 });
 },function(res){
 console.log(res);
 });
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 },
 //点击事件处理
 bindViewTap: function(e) {
 console.log(e.currentTarget.dataset.title);
 },
 //加载更多
 loadMore: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,});
 if (!this.data.hasMore) return
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list: that.data.list.concat(res.data.result.list),
 hidden: true,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
//刷新处理
refesh: function(e) {
 var that = this;
 that.setData({
 hasRefesh:true,
 });
 var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
 network_util._get(url,
 function(res){
 that.setData({
 list:res.data.result.list,
 hidden: true,
 page:1,
 hasRefesh:false,
 });
 },function(res){
 console.log(res);
 })
},
})

최종 효과:

뉴스 구현에 대한 세부 사항, 추후 구현될 예정입니다

위는 이 글의 전체 내용입니다. 도움이 되셨으면 좋겠습니다. 모두의 학습을 위해, 더 많은 관련 내용을 보려면 PHP에 주목하세요. 중국어 웹사이트!

관련 추천 :

위챗 애플릿 개발, 친구 목록 편지 목록, 해당 위치 점프

위챗 애플릿 다중 파일 다운로드를 위한 간단한 패키지

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