Carga desplegable del applet WeChat: explicación detallada de onReachBottom + establecer distancia de activación

El front end a menudo encuentra más demandas de carga pull-up, y generalmente implica pasar las páginas. El método de activación onReachBottom () se ha incluido en el applet. Aquí se explica cómo utilizar este método para lograr una mayor carga desplegable. Si lo necesita, mire directamente el código. Hay comentarios detallados:

1. Primero defina los datos de datos devueltos en data y pagenum pagenum

  data: {
    datalist: [], //.wxml文件需要绑定的列表,我这里用的数据类型是数组
    pagenum: 1, //初始页默认值为1
  },

2. El proceso de solicitud específico, que incluye la combinación de arreglos de datos nuevos y antiguos, actualización de datos en tiempo real

  getdatalist: function () { //可在onLoad中设置为进入页面默认加载
   var that = this;
    wx.request({
      url: '请求地址',
      data: {
        "key": "某入参value",
        "pageNum": that.data.pagenum, //从数据里获取当前页数
        "pageSize": 10, //每页显示条数
      },
      method: "POST",
      success: function (res) {
        var arr1 = that.data.datalist; //从data获取当前datalist数组
        var arr2 = res.data; //从此次请求返回的数据中获取新数组
        arr1 = arr1.concat(arr2); //合并数组
        that.setData({
          datalist: arr1 //合并后更新datalist
        })
      },
      fail: function (err) { },//请求失败
      complete: function () { }//请求完成后执行的函数
    })
  }

3. El número de página +1 se actualiza cuando se pasa la página y se activa una nueva ronda de solicitud, formando un bucle con la segunda parte.

  onReachBottom: function () { //触底开始下一页
    var that=this;
    var pagenum = that.data.pagenum + 1; //获取当前页数并+1
    that.setData({
      pagenum: pagenum, //更新当前页数
    })
    that.getdatalist();//重新调用请求获取下一页数据
  },

4. Si desea lograr una carga sin sentido, también puede establecer la distancia de activación para onReachBottom () en el archivo .json, para que no tenga que desplazarse hacia abajo para comenzar a activar la vuelta de página onReachBottom:
"onReachBottomDistance": 300 // Puede estar en la página actual También se puede configurar globalmente

Supongo que te gusta

Origin www.cnblogs.com/10manongit/p/12687869.html
Recomendado
Clasificación