##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);
})
},
})
Quellcode des Miniprogramms22916292018-06-21
Quellcode des Miniprogramms22913452018-06-21
Quellcode des Miniprogramms22918492018-06-21
Quellcode des Miniprogramms22964672018-06-20
Quellcode des Miniprogramms22959672018-06-20
Quellcode des Miniprogramms22967802018-06-20
Quellcode des Miniprogramms22965162018-06-20
Quellcode des Miniprogramms22963472018-06-20
Quellcode des Miniprogramms22968862018-06-20
Quellcode des Miniprogramms22998422018-06-19
Quellcode des Miniprogramms23004432018-06-19
Quellcode des Miniprogramms23003392018-06-19
Quellcode des Miniprogramms22999822018-06-19
Quellcode des Miniprogramms22994752018-06-19
Quellcode des Miniprogramms23003022018-06-19
Quellcode des Miniprogramms23114902018-06-15
Quellcode des Miniprogramms23121482018-06-15
Quellcode des Miniprogramms23121402018-06-15
Quellcode des Miniprogramms23117772018-06-15