WeChat アプレット リストのプルアップ更新とプルアップ読み込み

##1.いくつかのコンポーネントを紹介します

###1.1 スクロールビューコンポーネント

ここに写真の説明を
書きます。
注: 垂直スクロールを使用する場合は、固定の高さを指定し、WXSS を通じて高さを設定する必要があります。 ###1.2 画像コンポーネント

ここに写真の説明を
書きます。
注: モードには 12 のモードがあり、そのうち 3 つはズーム モード、9 つはトリミング モードです。 ###1.3 アイコンコンポーネント ここに画像の説明を書きます

iconType: [ 'success', 'info', 'warn', 'waiting', 'safe_success', 'safe_warn', 'success_circle', 'success_no_circle', 'waiting_circle', 'circle', 'download', 'info_circle' 、「キャンセル」、「検索」、「クリア」]

2. リストのプルアップロードとプルダウンリフレッシュの実装

##2.1 まずレンダリングを行って、ここに画像の説明を書きましょう ##2.2 ロジックは非常に簡単です。コードをアップロードするだけです ###2.2.1 詳細.wxml レイアウト ファイル

<loading hidden="{{hidden}}" bindingchange="loadingChange">
読み込み中...
</読み込み中>
<scroll-viewscroll-y="true" style="height: 100%;" bindingscrollto lower="loadMore" bindingscrolltoupper="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>更新中...</text></view>
<view wx:else style="display:none" ><text></text></view>
<view class="llll" wx:for="{{list}}" wx:for-item="item" bindingtap="bindViewTap"
data-title="{{item.title}}" >
<image style="幅: 50px;高さ: 50px;余白: 20rpx;" src="{{item.firstImg}}" ></image>
<クラス="eee" を表示>
<view style="margin:5px;font-size:8px"> title:{{item.title}}</view>
<view style="margin:5px;color:red;font-size:6px"> 出典:{{item.source}}</view>
</view>
</view>
<クラス="ヒント 1" を見る>
<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>致命的な読み込み中...</text></view>
<view wx:else><text>これ以上のコンテンツはありません</text></view>
</view>
</scroll-view>

###2.2.1detail.jsロジックコードファイル


var network_util = require('../../utils/network_util.js');
var json_util = require('../../utils/json_util.js');
ページ({
データ:{
// テキスト:「これはページです」
リスト:[]、
dd:''、
非表示:偽、
ページ: 1、
サイズ: 20、
hasMore:true、
HasRefesh:false
},
onLoad:関数(オプション){
var that = this;
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno=1&ps=10';
Network_util._get(url,
関数(解像度){
That.setData({
リスト:res.data.result.list、
非表示: true、
});
},関数(解像度){
console.log(res);
});
},
onReady:function(){
// ページのレンダリングが完了しました
},
onShow:function(){
// ページ表示
},
onHide:function(){
// ページを非表示
},
onUnload:function(){
// ページを閉じる
},
//クリックイベント処理
bindViewTap: function(e) {
console.log(e.currentTarget.dataset.title);
},
//さらに読み込み
loadMore: function(e) {
var that = this;
That.setData({
hasRefesh:true,});
if (!this.data.hasMore) が返される
var url = 'http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno='+(++that.data.page)+'&ps=10';
Network_util._get(url,
関数(解像度){
That.setData({
リスト: that.data.list.concat(res.data.result.list),
非表示: true、
hasRefesh:false,
});
},関数(解像度){
console.log(res);
})
},
//リフレッシュ処理
refesh: function(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,
関数(解像度){
That.setData({
リスト:res.data.result.list、
非表示: true、
ページ:1、
hasRefesh:false,
});
},関数(解像度){
console.log(res);
})
},
})