Weitere Codebeispiele für die Implementierung der Pulldown-Aktualisierung und des Pullup-Ladens von Seiten im WeChat-Miniprogramm

Der Inhalt dieses Artikels befasst sich mit den Codebeispielen für die Implementierung der Pulldown-Aktualisierung und des Pullup-Ladens weiterer Seiten im WeChat-Applet. Ich hoffe, dass dies der Fall ist hilfreich sein.

Beim Registrieren der Seite mit der Funktion page() gibt es zwei Objektparameter wie diesen. Der Benutzer legt fest, dass der Benutzer nach unten zieht und oben um nach unten zu gelangen

Im Miniprogramm ist das obere Dropdown-Menü des Benutzers standardmäßig deaktiviert. Die Einstellung in app.json ist für alle Seiten wirksam Die Einstellung auf einer separaten Seite gilt für die aktuelle Seite;

index.json

{
  "enablePullDownRefresh": true,
  "onPullDownRefresh": true,
  "onReachBottom": true
}

Wenn Sie die Pulldown-Animation nicht sehen können, müssen Sie

  "window": {
    "backgroundTextStyle": "dark"
  },

in app.json. Der nächste Schritt besteht darin, den js-Code zu schreiben

Pull-down-Aktualisierung

/**
   * 下拉刷新恢复初始化
   */
  onPullDownRefresh: function () {
    
    var self = this;

     // 刷新清空搜索框
    self.data.wxSearchData.value = '';
    self.setData({
      wxSearchData: self.data.wxSearchData
    })

    // 初始化列表
    app.globalData.allData = null;
    // app.globalData.findData = null;
    // 初始页数设置为1
    app.globalData.currentPage = 1;
    var _currentPage = app.globalData.currentPage;
    // 搜索关键字
    app.globalData.findData = '';
    var _find = app.globalData.findData;
    // 10位数时间戳
    var _timeStamp = Date.parse(new Date());
    _timeStamp = _timeStamp / 1000;
    // 秘钥
    var _tokenKey = _timeStamp + "xxx" + "127.0.0.1" + _find;
    _tokenKey = key.md5(_tokenKey);

    wx.request({
      url: 'https://xxx:9090/v1/Tools/UserModel/GetUserList/',
      data: {
        find: _find,
        tokenKey: _tokenKey,
        timeStamp: _timeStamp,
        currentPage: _currentPage,
      },
      method: "GET",
      header: {
        "Content-Type": "application/json",
      },
      success: function (res) {
        app.globalData.allData = res.data.datas;
        // console.log(res)
        self.setData({
          list: res.data.datas
        })
        // 显示顶部刷新图标
        wx.showNavigationBarLoading();
        // 隐藏导航栏加载框
        wx.hideNavigationBarLoading();
        // 停止下拉动作
        wx.stopPullDownRefresh();
      },
      fail: function () {
        console.log("error")
      }
    })
  },

Zum Laden mehr hochziehen

/**
   * 上拉刷新触底加载更多
   */
  onReachBottom: function () {

    var self = this;
    
    // 显示加载图标
    wx.showLoading({
      title: '玩命加载中',
    })

    // 页数+1
    app.globalData.currentPage ++;
    var _currentPage = app.globalData.currentPage;
    // 搜索关键字
    var _find = app.globalData.findData;
    // 10位数时间戳
    var _timeStamp = Date.parse(new Date());
    _timeStamp = _timeStamp / 1000;
    // 秘钥
    var _tokenKey = _timeStamp + "xxx" + "127.0.0.1" + _find;
    _tokenKey = key.md5(_tokenKey);
    
    wx.request({
      url: 'https://api.xxx.com:9090/v1/Tools/UserModel/GetUserList/',
      data: {
        find: _find,
        tokenKey: _tokenKey,
        timeStamp: _timeStamp,
        currentPage: _currentPage,
      },
      method: "GET",
      header: {
        "Content-Type": "application/json",
      },
      success: function (res) {
        // 回调函数，将新数据压到队列里
        for (var i = 0; i < res.data.each_page; i++) {
          app.globalData.allData.push(res.data.datas[i]);
        }
        // 设置数据
        self.setData({
          list: app.globalData.allData
        })
        // 隐藏加载框
        wx.hideLoading();
      },
      fail: function () {
        console.log("error")
      }
    })
  },

Verwandte Empfehlungen:

So legen Sie globale Variablen (Code) im WeChat-Applet fest

So rufen Sie lokale Schnittstellen im WeChat-Applet auf

So implementieren Sie synchrone Anfragen im WeChat-Applet

Das obige ist der detaillierte Inhalt vonWeitere Codebeispiele für die Implementierung der Pulldown-Aktualisierung und des Pullup-Ladens von Seiten im WeChat-Miniprogramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!