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

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

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

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

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 Tout d'abord, prenons un rendu

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>

2.2.1 détail. js fichier de code logique

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 :

Détails sur l'actualité sera implémenté plus tard

Adresse du code : http://xiazai.jb51.net/201703/yuanma/WeiXinProject-master_jb51.rar

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!