微信小程序向下滚动加载更多数据

1|0背景、需求：

微信小程序本身能处理的后台数据是有限的，一次性展示过多数据也会造成加载过慢,所以滚动下拉加载实现是有必要,其实本质就是分页加载。

2|0代码

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
百度搜索答案

__EOF__

本文作者：boxJLP
本文链接：https://www.cnblogs.com/toWorld/p/13434767.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！