微信小程序--下拉流加载

本文主要介绍小程序流加载

实现的逻辑,是需要scroll-view监听bindscrolltolower下拉事件触发流加载，向后台发起分页请求page++

1.前端.xml

	//前端页面
	<scroll-view scroll-y style="height:100vh;" bindscrolltolower="lower" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
	
	<view class="page">
	  <block wx:for="{{list}}" wx:key="">
    	 
      </block>
	</view>
	
	</scroll-view> 

tips: view内class='page’样式需要自行编写，通过数组list循环遍历

2.数据加载js页面

//默认请求1-2个篇文章
 data: {
    imgHttp: app.globalData.imgHttp,
    list: [],
    page: 1,
  },
  	lower: function (e) {
    var that = this
    that.setData({
      page: that.data.page + 1  //后台数据需要分页，每次加载一页
    })
    var page = that.data.page
    var pageSize = 2  //改变pageSize的值默认加载每页的数量
    wx.request({
      url: request_url,
      data: {
        'page': page,
        'pageSize': pageSize,
      },
      success: function (res) {
          if(res.data.code==200){
            let List = that.data.list
            let list = res.data.content
            for (var i = 0; i < list.length; i++) {
              List.push(list[i])  //循环遍历添加数组
            }
            that.setData({
              list: List,
            })
          }
          else{
            wx.showToast({
              title: '没有了哦',
              icon:'loading'
            })
          }
        }
     })
    }

Tips：后端在数据为空的时候需要改变res.data.code的值阻止加载事件或者由前端处理