微信開発のドロップダウン・リフレッシュ・アップロード

微信小プログラムは「ドロップダウン・リフレッシュ、アップ・ロードの詳細」機能を実現し、2つの実現方法がある.
方式1:ページのonPullDownRefreshとonReachBottomを利用して実現する:

onPullDownRefresh:ドロップダウン・リフレッシュ

は、ユーザドロップダウン・リフレッシュ・イベントをリスニングする.

は、app.jsonのwindowオプションまたはページ構成でenablePullDownRefreshを開く必要があります.

データ更新処理が完了すると、wx.stopPullDownRefreshは現在のページのドロップダウンリフレッシュを停止することができる.

onReachBottom:上引き底

は、ユーザのタッチダウンイベントをリスニングする.

は、app.jsonのwindowオプションまたはページ構成においてトリガ距離onReachBottomDistanceを設定することができる.

トリガ距離内でスライドしている間、このイベントは1回のみトリガされます.

index.json:
{
"navigationBarTitleText":
「取引記録」、
"enablePullDownRefresh":
true
}
index.wxml:
<
view
class=
"container">
ドロップダウン・リフレッシュ、プルアップ・ロードのテスト
view
>
<
view
class=
"weui-loadmore"
hidden=
"{{isHideLoadMore}}">
<
view
class=
"weui-loading">
view
>
<
view
class=
「weui-loadmore-tips」>ロード中
view
>
view
>
index.js書き換えシステムコールバック関数onPullDownRefreshとonReachBottom:
//プルダウンリフレッシュ
onPullDownRefresh:
function () {
console.log(
ドロップダウン・リフレッシュ);
//ページ関連イベント処理関数:ユーザーのドロップダウンアクションを傍受する
wx.showNavigationBarLoading()
//タイトルバーにロードを表示する
//アナログロード
setTimeout(
function () {
//complete
wx.hideNavigationBarLoading()
//ロード停止完了
wx.stopPullDownRefresh()
//ドロップダウン・リフレッシュの停止
},
1500);
},
//追加ロード
onReachBottom:
function () {
console.log(
「もっとロード」);
},
実行効果:onPullDownRefreshは実行できますが、onReachBottomは実行できません.振り回されて、最後に発見しました.
ページの内容が1画面未満の場合は、上に引っ張るとonReachBottomをトリガーできません.
では、他の代替案はありますか?答えはscrollviewを使うことです.
方式2:scrollviewの属性bindscrolltoupperとbindscrolltolowerを用いて実現する.
wxmlサンプルコード:
       bindscrolltolower="lower"         bindscrolltoupper="upper"         bindtouchstart="start"         bindtouchend="end">                                {{item}}                
その後、jsファイルに関数を記述し、対応するイベントを処理すればよい.
まとめ:
1、単に「プルダウン・リフレッシュ」を実現する場合は、scroll-viewではなくページのスクロールを使用して、トップステータスバーをクリックしてページのトップに戻ることもできます
2、ページのenablePullDownRefresh属性を使用して、ページ内のある領域/コントロールに対して「ドロップダウン・リフレッシュ、アップ・ロードその他」機能を実現できない.
3、ドロップダウン・リフレッシュ、より多くのロードを実現するには、位置、幅を自由に定義できるため、scrollviewを使用することをお勧めします.