Implémentation du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat-Développement de mini-programmes-php.cn

Implémentation du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat

巴扎黑

Libérer： 2017-04-01 15:36:47

original

2108 Les gens l'ont consulté

Cet article présente principalement la méthode d'implémentation du chargement pull-up et de l'actualisation déroulante des listes dans l'applet WeChat. A une très bonne valeur de référence. Jetons-y un coup d'œil avec l'éditeur ci-dessous

Le mini-programme WeChat peut être considéré comme le terme le plus populaire après le 21 septembre. Une fois apparu, il a vraiment bombardé tous les développeurs. vous inquiétez pas, l'arrivée des mini-programmes WeChat va-t-elle bouleverser les applications mobiles et mettre les programmeurs mobiles au chômage ? En tant que développeur Android, je n'y crois pas. Même si c'est le cas, il faudra un an ou deux de transition et de peaufinage pour y parvenir. Oui.

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

Implémentation du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat

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

Implémentation du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat

Remarque : le mode dispose de 12 modes, dont 3 sont des modes de zoom, 9 types sont des modes de recadrage.

1.3 Composant Icône

Implémentation du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat

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

Copier après la connexion

2. Implémentation du chargement pull-up et du rafraîchissement pull-down de la liste

2.1 Tout d'abord, prenons un rendu

Implémentation du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat

2.2 La logique est très simple, il suffit de saisir le code

2.2.1 détail.wxml fichier de mise en page

<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>

Copier après la connexion

2.2.1 détail. js fichier de code logique

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);
 })
},
})

Copier après la connexion

Effet final :

Implémentation du chargement pull-up et de l'actualisation déroulante de la liste des applets WeChat