Actualisation pull-up et chargement pull-up de la liste des applets WeChat

##1.Introduire plusieurs composants

###1.1 composant de défilement-vue

Écrivez la description de l'image ici

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

Écrivez la description de l'image ici

Remarque : le mode propose 12 modes, dont 3 modes de zoom et 9 modes de recadrage. ###1.3 Composant icône Écrivez la description de l'image ici

iconType : [ 'succès', 'info', 'avertir', 'en attente', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'info_circle' , 'annuler', 'rechercher', 'effacer' ]

2. Mise en œuvre du chargement pull-up et de l'actualisation déroulante des listes

##2.1 Prenons d'abord un rendu et écrivons la description de l'image ici ##2.2 La logique est très simple, il suffit de télécharger le code ###2.2.1 Fichier de mise en page detail.wxml

<loading Hidden="{{hidden}}" bindchange="loadingChange">
Chargement...
</chargement> <scroll-view scroll-y="true" style="hauteur : 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>Actualisation...</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}}" >
<style d'image=" largeur : 50px;hauteur : 50px;marge : 20rpx;" ></image>
<view class="eee" > <view style="margin:5px;font-size:8px"> titre :{{item.title}}</view>
<view style="margin:5px;color:red;font-size:6px"> Source :{{item.source}}</view>
              </view>
</vue>
<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>Chargement mortel...</text></view>
<view wx:else><text>Plus de contenu</text></view>
</vue>
</vue par défilement>

###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({
données :{
// texte : "Ceci est une page"
Liste :[],
jj:'',
Caché : faux,
Page : 1,
Taille : 20,
HasMore : vrai,
hasRefesh: faux
},
onLoad:fonction(options){
var ça = ceci;
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
Network_util._get(url,
fonction(res){
Cela.setData({
Liste : res.data.result.list,
caché : vrai,
});
},fonction(res){
console.log(res);
});
},
onReady:fonction(){
// Rendu de la page terminé
},
onShow:fonction(){
// Affichage des pages
},
onHide:fonction(){
// Page masquée
},
onUnload:fonction(){
// Page fermée
},
//Traitement des événements de clic
bindViewTap : fonction(e) {
console.log(e.currentTarget.dataset.title);
},
//Charger plus
loadMore : fonction(e) {
var ça = ceci;
Cela.setData({
hasRefesh:true,});
Si (!this.data.hasMore) revient
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
Network_util._get(url,
fonction(res){
Cela.setData({
Liste : that.data.list.concat(res.data.result.list),
caché : vrai,
HasRefesh : faux,
});
},fonction(res){
console.log(res);
})
},
//Traitement d'actualisation
rafraîchissement : fonction(e) {
var ça = ceci;
that.setData({
hasRefesh : vrai,
});
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
Network_util._get(url,
fonction(res){
Cela.setData({
Liste : res.data.result.list,
Caché : vrai,
Page :1,
       hasRefesh : faux,
    });
    },fonction(res){
     console.log(res);
 })
},
})