微信小程序页面上下滑动数据显示功能--小程序端代码

微信小程序页面上下滑动数据显示功能–小程序端代码

在微信小程序开发过程中，我们在手机页面显示数据时候，会经常的遇到手机数据页面上下滑动页面进行数据显示。下面我们结合着例子给大家讲解一下。

1、向下滑动实现数据翻页显示原理。

我们打开页面的时候，通过onLoad页面加载调用查询方法，显示出查询出来的第一页数据（数据要多于当前页面，保证有上下滚动条），在我们手机滑动页面数据的时候，每次快滑动到底部的时候，我们触发onReachBottom事件函数，这个事件函数里面再调用我们的查询方法（第二页，第三页…以此类推），等查询出来的数据追加在之前显示的数据后面，这样就可以连续的显示数据了。

2、数据显示实例，本次演示的针对全量查询（不包含输入条件的查询）

2.1 定义初始数据

    //assetList.js
   data: {
     assetList:[], //数据列表   
     pageNo:1, //默认当前页
     pageSize:15, //每页的数据条数，这个可以根据实际情况进行修改
     totalPages: 1, //总页数，默认值是1
     queryMap:[], //查询参数，为空是全量查询
     sortMap: {} //查询排序
     
  },

2.2 封装通用调用方法 util.request()

//util.js
/**
 * 封封微信的的request，仅供大家参考
 */
function request(url, data = {}, method ) {
  return new Promise(function(resolve, reject) {
    wx.request({
      url: url,
      data: data,
      method: method||'POST',  //如果不传默认是post方法
      header: {
        'Content-Type': 'application/json',      
      },
      success: function(res) {        
        if (res.statusCode == 200) {
        //这里可以增加是否登陆判断，我这边暂时省略了。
          resolve(res.data);
        } else {
          reject(res.errMsg);
        }

      },
      fail: function(err) {
        reject(err)
      }
    })
  });
}

2.3定义查询方法getAssetList

   //assetList.js
   /**
   * 设备列表  
   *  queryMap 查询参数
   *  type=0 是数据追加  1是数据不追加 
   */ 
  getAssetList: function(queryMap,type){
    let that = this;
//api.assetList 请求地址，自己根据自己的事情情况进行定义
    util.request(api.assetList,{
      pageMap:{
        pageNo:that.data.pageNo,
        pageSize:that.data.pageSize
      },
      queryType:'weixin',
      queryMap: queryMap,
      sortMap: that.data.sortMap
    }).then(function(res) {
      if (res.code === 200) {
        that.setData({     
        assetList:  type==0?that.data.assetList.concat(res.result.tableData):res.result.tableData,
        totalPages: res.result.dataCount/that.data.pageSize
        });
        // console.log("that.data.assetList==",that.data.assetList)
      }
    });
  },

2.4 初始化页面加载方法onLoad里面要调用查询方法getAssetList

//assetList.js
  /**
   *监听页面加载
   */
  onLoad: function (options) {
    let that = this;
    that.getAssetList(that.data.queryMap,1);

  },

2.5 页面上拉触底事件的处理函数 onReachBottom

官方功能描述
可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
在触发距离内滑动期间，本事件只会被触发一次。
描述解析：onReachBottomDistance这个是配置到*.json里面，默认是50，单位是px，这个参数含义是，滑动过程中页面的最底部距离手机屏幕的底部的距离达到onReachBottomDistance设置的值后，就是触发onReachBottom的方法。如果设置的条数比较少，第一页显示的数据没有滚动跳，那么他不会触发。

比如上图的这种情况，没有滚动条，那么他就不会触发onReachBottom事件函数，所以我们在设置数据显示的条数的时候，数据要显示满屏且有滚动条，onReachBottomDistance的值正常情况默认值就行。

//assetList.js
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

    if (this.data.totalPages > this.data.pageNo) {
      this.setData({
        pageNo: this.data.pageNo + 1
      });
      let that = this;
      //再次调用查询方法
      this.getAssetList(that.data.queryMap,0);
    } else {
      wx.showToast({
        title: '没有更多数据了',
        icon: 'none',
        duration: 2000
      });
      return false;
    }
  },