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 comporte 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 Jetons un coup d'œil aux rendus

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

2.2.1 fichier de mise en page detail.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.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 :

À propos de l'actualité La mise en œuvre détaillée sera mise en œuvre ultérieurement

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention. au site Web PHP chinois !

Recommandations associées :

Liste d'amis de développement d'applets WeChat Liste de lettres sauter la position correspondante

Applet WeChat Package simple pour télécharger plusieurs fichiers

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!