이 글에서는 WeChat 애플릿에서 목록의 풀업 로딩 및 풀다운 새로 고침을 구현하는 방법을 주로 소개합니다. 매우 좋은 참조 값을 가지고 있습니다. 아래 에디터와 함께 살펴보겠습니다
WeChat 미니 프로그램은 9월 21일 이후 가장 인기 있는 용어라고 할 수 있습니다. 일단 등장하고 나면 정말 모든 개발자들이 충격에 빠졌습니다. 걱정하세요. WeChat 미니 프로그램이 모바일 앱을 전복시키고 모바일 프로그래머를 실업자로 만들까요? 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); }) }, })
최종 효과:
뉴스 구현에 대한 자세한 내용은 추후 구현
코드 주소 : http://xiazai.jb51.net/201703/yuanma/WeiXinProject-master_jb51.rar
위 내용은 WeChat 애플릿 목록의 풀업 로딩 및 풀다운 새로 고침 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!