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

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

巴扎黑
巴扎黑original
2017-08-17 14:53:251935parcourir
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
Tutoriel sur l'implémentation des effets de chargement et d'actualisation déroulant des listes dans le développement de mini-programmes

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

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


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

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




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

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


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(&#39;../../utils/network_util.js&#39;);var json_util = require(&#39;../../utils/json_util.js&#39;);Page({
 data:{ // text:"这是一个页面"
 list:[],
 dd:&#39;&#39;,
 hidden:false,
 page: 1,
 size: 20,
 hasMore:true,
 hasRefesh:false },
 onLoad:function(options){ var that = this; var url = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10&#39;;
 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 = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=&#39;+(++that.data.page)+&#39;&ps=10&#39;;
 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 = &#39;http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10&#39;;
 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

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

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn