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

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

不言
Freigeben: 2018-08-11 17:41:11
Original
8647 Leute haben es durchsucht

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
}
Nach dem Login kopieren

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

  "window": {
    "backgroundTextStyle": "dark"
  },
Nach dem Login kopieren
< festlegen 🎜>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 = &#39;&#39;;
    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 = &#39;&#39;;
    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: &#39;https://xxx:9090/v1/Tools/UserModel/GetUserList/&#39;,
      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")
      }
    })
  },
Nach dem Login kopieren

Zum Laden mehr hochziehen

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

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

    // 页数+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: &#39;https://api.xxx.com:9090/v1/Tools/UserModel/GetUserList/&#39;,
      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")
      }
    })
  },
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage