WeChatアプレットのプルダウンリフレッシュとプルアップボトミングメソッドの実現について

日々のプロジェクト開発において、フロントエンド エンジニアは必然的に WeChat アプレットの開発に触れることがあり、開発中にプルダウン リフレッシュとプルアップ ロードの問題に遭遇することになります。早速本題に入りましょう。

プルツーリフレッシュについて

1. json ファイルでドロップダウン イベントを有効にする

1. app.json ファイルに配置します。ドロップダウン イベントはアプレットのすべてのページで有効になっていることに注意してください。一般に、すべてのページが有効になるわけではありません。

2. 別のページに対応する .json ファイルに配置します。この時点では、単一のページのみがドロップダウン イベントをトリガーします。

"enablePullDownRefresh": true,

"backgroundTextStyle": "dark"

このうち、backgroundTextStyle はプルダウン更新読み込みスタイルの設定に使用され、ダークとライトの 2 つのカラー属性のみをサポートします。

次に、js ファイルを入力します

2. js ファイルで onPullDownRefresh メソッドを使用します。

onPullDownRefresh: function () {
    this.setData({
      list: [],
    })
    wx.showNavigationBarLoading()
    // 定义下拉事件触发时，弹出的提示框
    wx.showToast({
      title: 'loading....',
      icon: 'loading',
      duration: 500
    });
    // 这里做了个延时功能，可不写
    setTimeout(() => {
      wx.hideNavigationBarLoading()  // 隐藏导航条加载动画
      wx.stopPullDownRefresh()       // 停止当前页面下拉刷新
      // 这里进行 接口方法的调用
      this.list();
    }, 500);
  },

###### プルダウンして更新すると、これで終了です。

底打ちについて

1. js では、最初に基本パラメータを定義する必要があります。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    page: 1,   // 页码
    size: 10,  // 每页数据数
    total: 0,  // 数据总数
  },
  //  这里为请求接口方法，请自定义 
  getList(){

  }
})

2.  onReachBottom の API メソッドを入力して、引き上げと底上げを行います

早速コードに移りましょう

onReachBottom: function () {
    var p = this.data.page;
    var s = this.data.size;
    var t = this.data.titol;
    // 当页码数乘每页数据量小于总数量时，页码数+1，同时再次请求接口请求新的数据
    if (p * s < t) {
        p=p+1;
        this.setData({
            page:p
        })
        this.getList();  //自己需要重新加载的
    }else{
        // 这里直接给出提示就好了
        wx.showToast({
            title: '暂无更多数据啦',
            icon: 'none',
            duration: 2000
        });
    }
}}

###### 懸垂の下部はここにあります。お役に立てば幸いです。