小さなマイクロチャネルプルダウン及びプルアップ手順は、より多くの負荷を達成するために

 では、前の記事では、我々はそれがラジャ上のスクロールビューを使用して達成することができます知っているより多くのアップロードが、スクロールビューの制限のために、それは我々がプルアップを実装するためのコンポーネントを使用し、より多くのドロップダウンロードを達成この記事を閲覧することができず、よりロードするためにプルダウン。

 

その他のドロップダウンをロードします。

      1、応答に xxx.json  プロファイルを次のように順次配置

            >> enablePullDownRefresh：ドロップダウンリフレッシュを開くために、真の表現

 　　　>> onReachBottomDistance：0  

            >>スタイルのbackgroundTextStyleドロップダウンロードは、唯一のダーク/ライトをサポートしています

            ウィンドウの>> backgroundColorの背景色

      白領域のページピースのドロップダウン、トップが表示されたときに、図2に示すように、上の2つの後ろに、設定されていません。

      図3に示すように、時にプルダウンリフレッシュ、wx.showLoadingのヒントを使用することができない領域がトップではないことを、プロンプトのページが更新さを見につながる、IOSページのリバウンドで特にあまり、（私がテストしていないチップの残りの部分）。

      4、ページのプルダウンが引き金となり  onPullDownRefresh  イベントを

      防ぐために、5、  onPullDownRefresh 再三の要求につながる、トリガーを数回

 

ラジャの詳細アップロード：

     対応xxx.json（必須ではない）に配置された1

           ページの一番下からの距離、単位はピクセルプルページ上のトリガ・イベント>> onReachBottomDistanceを底打ちされます

     図2に示すように、以下でonReachBottomDistance距離に引っ張り、それがページトリガする  onReachBottom イベント

 

結果を実現：

 

コードの実装：

書き込み1、ページレイアウトloadMore.wxmlファイル

Javaコード  

1. <ビュー  クラス= 「ビューコンテナ」>  
2.   <ブロックWX：のため= '{{記事}}' WX：キー= '{{item.id}}'>  
3.     <ビュー  クラス= 「記事-コンテナ」>  
4.       <ビュー  クラス= 「情報」>  
5.         <画像  クラス= 'アバター' SRC = '{{item.avatar}}'> </画像> {{}} item.nickname  
6.         <テキスト  クラス= 'を作成-で'> {{item.created_at}} </テキスト>  
7.         <テキスト  クラス= 'カテゴリ'> {{item.category}} </テキスト>  
8.       </ビュー>  
9.     </ビュー>  
10.   </ブロック>  
11.   <ビュー  クラス= 隠された'データロード' = '{{隠れ}}'>  
12.     読み込んでいます...  
13.   </ビュー>  
14. </ビュー>  

書き込みloadMore.wxssファイルのスタイルで書かれた2、

Javaコード  

1. .view容器{  
2.   #FFF;  
3. }  
4.   
5. .DATAローディング{  
6.   高さ：100rpx。  
7.   行の高さ：100rpx。  
8.   #eee;  
9.   テキスト整列：センター;  
10.   フォントサイズ：14px;  
11. }  
12.   
13. .articles容器{  
14.   border-bottom：1pxの固体#eee。  
15.   マージン：30rpx 10rpx。  
16.   #eee;  
17. }  
18.   
19. .info .articles容器{  
20.   フォントサイズ：12ピクセル;  
21.   マージン：20rpx 0rpx。  
22.   高さ：  100％;  
23.   表示：インラインブロック。  
24. }  
25.   
26. .articles容器の.info .avatar {  
27.   幅：60rpx。  
28.   高さ：60rpx。  
29.   マージン右：10rpx。  
30.   国境半径：60rpx。  
31.   表示：インラインブロック。  
32.   垂直整列：中央;  
33. }  
34.   
35. .created-での.info .articles容器{  
36.   マージン：0PX 20rpx。  
37.   表示：インラインブロック。  
38.   垂直整列：中央;  
39. }  
40.   
41. .articles容器の.info .category {  
42.   色：＃3399ea。  
43.   表示：インラインブロック。  
44.   垂直整列：中央;  
45. }  

3、JS制御ファイル書かloadMore.js

Javaコード  

1. ページ（{  
2.   
3.   データ：{  
4.     / ** 
5.      * URLは、アクセスに必要な 
6.      * /  
7.     URLを：[  
8.       「https://www.csdn.net/api/articles?type=more&category=home&shown_offset=0」  
9.       「https://www.csdn.net/api/articles?type=new&category=arch」  
10.       「https://www.csdn.net/api/articles?type=new&category=ai」  
11.       'https://www.csdn.net/api/articles?type=new&category=newarticles'  
12.     ]、  
13.     / ** 
14.      現在のアクセスの* URL索引 
15.      * /  
16.     currentUrlIndex：  0、  
17.     / ** 
18.      *記事にゲット 
19.      * /  
20.     記事：[]、  
21.     / ** 
22.      *の下に引っ張られたときにコントロールがあるかどうかを「ロード...」 
23.      * /  
24.     隠された：  真、  
25.     / ** 
26.      データがロードされているかどうか*、データがより多くのを避けるために何度もロードされ、 
27.      * /  
28.     loadingData：  偽  
29.   }、  
30.   
31.   onLoad：機能（オプション）{  
32.     this.loadData（偽）;  
33.   }、  
34.   
35.   / ** 
36.    *データのロード 
37.    * /  
38.   loaddataの：関数（尾、コールバック）{  
39.     = VAR  これを、  
40.       urlIndex = that.data.currentUrlIndex。  
41.     wx.request（{  
42.       URL：that.data.urls [urlIndex]、  
43.       成功：関数（R）{  
44.         VAR oldArticles = that.data.articles、  
45.           newArticles =尾？oldArticles.concat（r.data.articles）：r.data.articles。  
46.         that.setData（{  
47.           記事：newArticles、  
48.           currentUrlIndex：（urlIndex +  1）> = that.data.urls.length？ 0：urlIndex +  1  
49.         }）;  
50.         IF（コールバック）{  
51.           折り返し電話（）;  
52.         }  
53.       }、  
54.       エラー：関数（R）{  
55.         console.info（'エラー'、R）;  
56.       }、  
57.       完全：関数（）{}  
58.     }）;  
59.   }、  
60.   
61.   / ** 
62.    *ドロップダウンモニターのユーザーアクション 
63.    * /  
64.   onPullDownRefresh：関数（）{  
65.     console.info（'onPullDownRefresh'）;  
66.     VAR loadingData =  this.data.loadingData、  
67.       =その  本。  
68.     IF（loadingData）{  
69.       リターン;  
70.     }  
71.     //表示ナビゲーションバーローディングアニメーション  
72.     wx.showNavigationBarLoading（）;  
73.     //ショーのロードプロンプトボックスは、IOSの下でシステムは、負荷のトップを見ることができない三点につながります  
74.     // wx.showLoading（{  
75.     //タイトル： '読み込み中...'  
76.     //}）。  
77.     setTimeout（関数（）{  
78.       that.loadData（偽、（）=> {  
79.         that.setData（{  
80.           loadingData：  偽  
81.         }）;  
82.         wx.stopPullDownRefresh（）;  
83.         // wx.hideLoading（）;  
84.         wx.hideNavigationBarLoading();  
85.         console.info（「ダウンデータの読み込みが完了しています。」）;  
86.       }）;  
87.     }、  1000）。  
88.   }、  
89.   
90.   / ** 
91.    *ページをプルするイベントハンドラをボトミング 
92.    * /  
93.   onReachBottom：関数（）{  
94.     console.info（'onReachBottom'）;  
95.     VAR隠さ=  this.data.hidden、  
96.       loadingData =  this.data.loadingData、  
97.       =その  本。  
98.     {（隠された）場合  
99.       this.setData（{  
100.         隠された：  偽  
101.       }）;  
102.       console.info（this.data.hidden）。  
103.     }  
104.     IF（loadingData）{  
105.       リターン;  
106.     }  
107.     this.setData（{  
108.       loadingData：  真  
109.     }）;  
110.     //ロード・データ、アナログ時間のかかる操作  
111.   
112.     wx.showLoading（{  
113.       タイトル：  「読み込み中...」  
114.     }）;  
115.   
116.     setTimeout（関数（）{  
117.       that.loadData（真、（）=> {  
118.         that.setData（{  
119.           隠された：  真、  
120.           loadingData：  偽  
121.         }）;  
122.         wx.hideLoading（）;  
123.       }）;  
124.       console.info（「プルアップデータの読み込みが完了しています。」）;  
125.     }、  1000）。  
126.   }  
127. }）  

図4に示すように、準備loadMore.jsonのプロファイル

Javaコード  

1. {  
2.   「navigationBarTitleText」：  「リフレッシュしにより負荷にプルダウンするプル」  
3.   "enablePullDownRefresh"：  真、  
4.   "onReachBottomDistance"：  0、  
5.   "backgroundTextStyle"：  "暗いです"、  
6.   "backgroundColorの"：  "＃1 c0d9ff"  
7. }  

 

完全なコード：

マイクロチャネルは、アプレットのロードプルアップとプルダウンより多くのコードを達成：https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/view-pull-up-load-more