Plus d'exemples de code pour implémenter l'actualisation déroulante des pages et le chargement par extraction dans le mini-programme WeChat

Le contenu de cet article concerne les exemples de code pour la mise en œuvre de l'actualisation déroulante et du chargement pull-up de plus de pages dans l'applet WeChat. J'espère qu'il aura une certaine valeur de référence. être utile pour vous aidé.

Afficher le document. Lors de l'enregistrement de la page avec la fonction page(), il y a deux paramètres d'objet comme celui-ci. L'utilisateur détermine que l'utilisateur déroule et en haut. pour atteindre le bas

Dans le mini programme, la liste déroulante supérieure de l'utilisateur est désactivée par défaut. Nous devons la configurer pour l'activer. Le paramètre dans app.json est efficace pour toutes les pages, et. le paramètre sur une page séparée est efficace pour la page actuelle ;

index.json

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

Si vous ne voyez pas l'animation déroulante, vous devez la définir dans l'application .json

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

L'étape suivante consiste à écrire le code js

Tirez vers le bas pour actualiser

/**
   * 下拉刷新恢复初始化
   */
  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")
      }
    })
  },

Tirez vers le haut pour charger plus

/**
   * 上拉刷新触底加载更多
   */
  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")
      }
    })
  },

Recommandations associées :

Comment définir des variables globales dans l'applet WeChat (code )

Comment appeler l'interface locale dans l'applet WeChat

Comment appeler l'interface locale dans l'applet WeChat

Comment implémenter des requêtes synchrones dans l'applet WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!