小程序上拉底部刷新

小程序上拉触底刷新

我们在写项目的时候会遇到类似于原生JavaScript中的懒加载，刚刚进入组件的时候只加载10条数据，下拉触底的时候再去请求服务器累加10条新的数据。代码如下

方法一

1.在app.json的window对象中设置触发距离，此处不需要加单位！

  "window": {
    "onReachBottomDistance": 50
  },

2.在需要下拉触底的组件js文件中添加该方法onReachBottom进行请求数据,此方法为小程序自带的上拉触底函数！

onReachBottom(){
	//每次触底 num++ 
	this.data.num++
	//此处请求数据
	wx.request({
      url: 'https://******',
      data: {
        index:this.data.num
      },
      success：function(res){
      	//res
      }
}

方法二

1.在需要滚动加载的组件中添加wxml代码片段

<scroll-view scroll-y='true' bindscrolltolower='lower' style="height:auto;">

2.触发函数

lower(){
    this.data.num++
    wx.request({
      url: 'https://*********',
      data: {
      	index : this.data.num
	  }
      success:function(res){
		//res
	  }
    })