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