Pull-up-Aktualisierung und Pull-up-Laden der WeChat-Applet-Liste

##1.Mehrere Komponenten vorstellen

###1.1 Scroll-View-Komponente

Hier Bildbeschreibung schreiben

Hinweis: Wenn Sie vertikales Scrollen verwenden, müssen Sie eine feste Höhe angeben und die Höhe über WXSS festlegen. ###1.2 Bildkomponente

Hier Bildbeschreibung schreiben

Hinweis: Der Modus verfügt über 12 Modi, davon 3 Zoommodi und 9 Zuschneidemodi. ###1.3 Symbolkomponente Hier Bildbeschreibung schreiben

iconType: [ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'info_circle' , 'Abbrechen', 'Suchen', 'Löschen' ]

2. Implementierung des Pull-Up-Ladens und Pull-Down-Aktualisierens von Listen

##2.1 Lassen Sie uns zuerst ein Rendering erstellen und hier die Bildbeschreibung schreiben. ##2.2 Die Logik ist sehr einfach. Laden Sie einfach den Code hoch. ###2.2.1 Detail.wxml-Layoutdatei

<loading versteckt="{{hidden}}" bindchange="loadingChange">
Wird geladen...
</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>Aktualisiert...</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"> Titel:{{item.title}}</view>
<view style="margin:5px;color:red;font-size:6px"> Quelle:{{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>Tödliches Laden...</text></view>
<view wx:else><text>Kein Inhalt mehr</text></view>
</view>
</scroll-view>

###2.2.1 detail.js Logikcodedatei


var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
Seite({
Daten:{
// text:"Dies ist eine Seite"
Liste:[],
dd:'',
Versteckt:falsch,
Seite: 1,
Größe: 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,
Funktion(en){
That.setData({
Liste:res.data.result.list,
Versteckt: wahr,
});
},function(res){
console.log(res);
});
},
onReady:function(){
// Seitenrendering abgeschlossen
},
onShow:function(){
// Seitenanzeige
},
onHide:function(){
// Seite ausgeblendet
},
onUnload:function(){
// Seite geschlossen
},
//Klicken Sie auf Ereignisverarbeitung
bindViewTap: Funktion(e) {
console.log(e.currentTarget.dataset.title);
},
//Mehr laden
LoadMore: Funktion(e) {
var that = this;
That.setData({
hasRefesh:true,});
Wenn (!this.data.hasMore) return
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
Network_util._get(url,
Funktion(en){
That.setData({
Liste: that.data.list.concat(res.data.result.list),
Versteckt: wahr,
HasRefesh:false,
});
},function(res){
console.log(res);
})
},
//Verarbeitung aktualisieren
refesh: Funktion(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,
Funktion(en){
That.setData({
Liste:res.data.result.list,
Versteckt: wahr,
Seite:1,
       hasRefesh:false,
    });
    },function(res){
     console.log(res);
 })
},
})