微信小程序向下滾動加載更多數據

背景、需求：

微信小程序本身能處理的后台數據是有限的，一次性展示過多數據也會造成加載過慢,所以滾動下拉加載實現是有必要,其實本質就是分頁加載。

代碼

1、wxss

/*這是利用了scroll-view組件，必要的參數。*/
page{
  width:100%;
  height:100%;
}
scroll-view {
  height:100%;
  /* other the code.. */
}

/*這邊我們單獨引用了weui得加載更多樣式*/
.weui-loading {
  margin: 0 5px;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12, end) infinite;
  animation: weuiLoading 1s steps(12, end) infinite;
  background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
  background-size: 100%;
}
.weui-loadmore {
  width: 65%;
  margin: 1.5em auto;
  line-height: 1.6em;
  font-size: 14px;
  text-align: center;
}
.weui-loadmore__tips {
  display: inline-block;
  vertical-align: middle;
}

2、wxml

<scroll-view scroll-y="true" style='height:100%;' bindscrolltolower="searchScrollLower"> 
  /*利用得是scroll-view得bindscrolltolower方法（注:滑動到底部觸發） */
	<van-sticky>
		<van-search value="{{ value }}" shape="round" placeholder="請輸入搜索關鍵詞" use-action-slot bind:search="onSeach"/>            
	</van-sticky>

	<van-cell-group>
		<block wx:for="{{projectItem}}" data-item="item">
			<van-divider hairline />
			<van-cell icon="records" is-link title="{{item.projectName}}" label="{{item.projectNo}}" border="{{ false }}" bindtap='toPersonalDetail' data-id="{{item.projectId}}" data-projectType="{{item.projectType}}" data-reviewStatus="{{item.reviewStatus}}">
				<van-icon slot="right-icon" name="search" class="custom-icon" />
			</van-cell>
		</block>
	</van-cell-group>

      /*weui加載更多樣式(注:isHideLoadMore控制顯示) */
      <view class="weui-loadmore" hidden="{{!isHideLoadMore}}">
	<view class="weui-loading"></view>
	<view class="weui-loadmore__tips">正在加載</view>
      </view>

</scroll-view>

3、js

  data: {
    pageNumber: 1,
    pageSize: 10,
    type:"",//區分未完成0，還是已完成1
    projectItem: [],
    isHideLoadMore:true,
    moreRequest:true,//控制用戶手賤多次下拉觸發請求
    parms:""//查詢條件參數用於下拉滾動
  },
  //下拉加載更多觸發方法
  searchScrollLower: function () {
    var that=this;
    var {pageNumber,pageSize,type,projectItem,moreRequest,parms} = this.data;
    var resArr = null;
    if(moreRequest==true){
      pageNumber++;
      that.setData({
        moreRequest:false,
        pageNumber:pageNumber
      })
      util.req.selectIndexProjectList({
        parms,
        type,
        pageNumber,
        pageSize
      })
      .then((res) => {
        if (res.data.length == 0) {
          that.setData({
            isHideLoadMore:false
          })
          wx.showToast({ //如果全部加載完成了也彈一個框
            title: '已經沒有更多啦!',
            icon: 'success',
            duration: 1500
          });
        } else {
          setTimeout(() => {
            resArr=res.data;
            var con=projectItem.concat(resArr)//合並數據
            that.setData({
              projectItem: con,
              moreRequest:true
            })
            wx.hideLoading();
          }, 1500)
        }
      })
      .catch((res) => {})
    }
  },
  

后端不再多提，利用好 pageNumber,pageSize即可。

參考網址:
微信小程序實戰篇-下拉刷新與加載更多
微信小程序實現滾動加載更多
微信小程序文檔scroll-view
百度搜索答案