##1.Perkenalkan beberapa komponen

###1.1 komponen paparan skrol

Tulis penerangan gambar di sini

Nota: Apabila menggunakan tatal menegak, anda perlu memberikan ketinggian tetap dan menetapkan ketinggian melalui WXSS. ###1.2 komponen imej

Tulis penerangan gambar di sini

Nota: mod mempunyai 12 mod, 3 daripadanya ialah mod zum dan 9 ialah mod pemangkasan. ###1.3 Komponen ikon Tulis penerangan gambar di sini

iconType: [ 'kejayaan', 'maklumat', 'amaran', 'menunggu', 'selamat_kejayaan', 'selamat_amaran', 'kejayaan_kalangan', 'berjaya_tiada_kalangan', 'menunggu_kalangan', 'kalangan', 'muat turun', 'info_circle' , 'batal', 'cari', 'kosongkan' ]

2. Pelaksanaan pull-up loading dan pull-down menyegarkan senarai

##2.1 Mari kita buat rendering dahulu dan tulis penerangan gambar di sini ##2.2 Logiknya sangat mudah, cuma muat naik kod ###2.2.1 detail.fail susun atur wxml

<loading hidden="{{hidden}}" bindchange="loadingChange">
Memuatkan...
</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>Refreshing...</text></view>
<lihat wx:else style="display:none" ><text></text></view>
<lihat 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>
<lihat kelas="eee" > <view style="margin:5px;font-size:8px"> title:{{item.title}}</view>
<view style="margin:5px;color:red;font-size:6px"> Sumber:{{item.source}}</view>
? ? ? ? ? ? ? </view>
</lihat>
<lihat kelas="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>Memuatkan maut...</text></view>
<lihat wx:else><teks>Tiada lagi kandungan</teks></lihat>
</lihat>
</scroll-view>

###2.2.1 detail.js fail kod logik


var network_util = memerlukan('../../utils/network_util.js');
var json_util = memerlukan('../../utils/json_util.js');
Halaman({
data:{
// teks:"Ini adalah halaman"
Senarai:[],
dd:'',
Tersembunyi:palsu,
Muka surat: 1,
Saiz: 20,
HasMore:true,
HasRefesh:false
},
onLoad:function(pilihan){
var itu = ini;
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
Network_util._get(url,
fungsi(res){
That.setData({
Senarai:res.data.result.list,
tersembunyi: benar,
});
},fungsi(res){
console.log(res);
});
},
onReady:function(){
// Penyampaian halaman selesai
},
onShow:function(){
// Paparan halaman
},
onHide:function(){
// Halaman disembunyikan
},
onUnload:function(){
// Halaman ditutup
},
//Klik pemprosesan acara
bindViewTap: fungsi(e) {
console.log(e.currentTarget.dataset.title);
},
//Muat lagi
loadMore: fungsi(e) {
var itu = ini;
That.setData({
hasRefesh:true,});
Jika (!this.data.hasMore) kembali
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
Network_util._get(url,
fungsi(res){
That.setData({
Senarai: that.data.list.concat(res.data.result.list),
tersembunyi: benar,
HasRefesh:palsu,
});
},fungsi(res){
console.log(res);
})
},
//Segar semula pemprosesan
refesh: fungsi(e) {
var itu = ini;
that.setData({
hasRefesh:true,
});
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
Network_util._get(url,
fungsi(res){
That.setData({
Senarai:res.data.result.list,
tersembunyi: benar,
Halaman:1,
? ? ? ?hasRefesh:false,
? ? });
? ? },fungsi(res){
? ? ?console.log(res);
?})
},
})