Tutoriel sur l'implémentation des effets de chargement et d'actualisation déroulant des listes dans le développement de mini-programmes

Les mini-programmes WeChat peuvent être considérés comme le terme le plus en vogue après le 21 septembre. Une fois apparus, ils ont vraiment bombardé tous les développeurs. Bien sûr, de nombreux développeurs d'applications craignent que l'arrivée des mini-programmes WeChat ne bouleverse les applications mobiles. Je ne crois pas que les programmeurs mobiles perdront leur emploi. Même si c'est le cas, il faudra un an ou deux de transition et de perfectionnement pour y parvenir.
Peu importe si les mini-programmes WeChat peuvent bouleverser le paysage actuel du développement mobile, nous devons avoir une attitude positive pour accepter et apprendre. Nous ne rejetons pas les nouvelles technologies, il vaut donc mieux agir que réfléchir. Créez d’abord rapidement un outil de développement d’applets WeChat. Commençons donc par apprendre la mise en œuvre du chargement pull-up et de l'actualisation déroulante de la liste (obtention des actualités WeChat via la plateforme de données agrégées).
1. Introduire plusieurs composants
1.1 composant de défilement

Image : 1.jpg

Remarque : lorsque vous utilisez le défilement vertical, vous devez donner une hauteur fixe et définir la hauteur via WXSS.
Composant d'image 1.2

Image : 2.jpg

Remarque : le mode comporte 12 modes, parmi lesquels 3 sont des modes de zoom et 9 sont des modes de recadrage.
1.3 Composant icône

Image : 3.jpg

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

2. Implémentation du chargement pull-up et du rafraîchissement pull-down de la liste
2.1 Jetons un coup d'œil aux rendus

Photo : 4.gif

2.2 La logique est très simple, il suffit de la coder directement
2.2.1 fichier de mise en page detail.wxml

<loading hidden="pw_hidden" bindchange="loadingChange">
 加载中... </loading> 
 <scroll-view scroll-y="true" style="height: 100%;" bindscrolltolower="loadMore" bindscrolltoupper="refesh"> <view wx:if="pw_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="pw_list" wx:for-item="item" bindtap="bindViewTap" data-title="pw_item.title" > <image style=" width: 50px;height: 50px;margin: 20rpx;" src="pw_item.firstImg" ></image> <view class="eee" > 
 <view style="margin:5px;font-size:8px"> 标题:pw_item.title</view> <view style="margin:5px;color:red;font-size:6px"> 来源:pw_item.source</view> </view></view><view class="tips1"> <view wx:if="pw_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.1 fichier de code logique detail.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); })},})

Effet final :

Image : 5.jpg

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!