分页分为两种，一种是一次性将后台数据请求过来，再对这些数据进行分页，第二种就是一次请求几条数据，分批次请求，一般情况下是推荐第二种，因为第一种很容易造成服务器的卡顿。

• 我在写公司的一个微信小程序，类似于电商项目，首页可以预定房间，第二个菜单栏里可以进行购买商品，无论是预定房间时显示房型列表还是商品列表都是需要用到分页，比如说，大床房这个大类别下可能有好几种房型，经典大床房，豪华大床房，商务大床房……
• 这个时候就需要分批次请求后台的房型列表
• 以这个例子为列，先看一下效果，为了方便测试，我是两条数据为一页，如果请求的最后一页没有了数据，则显示没有更多数据

代码实现

1. 这个效果中，一个房型就是一条数据，大概思路就是将你每次要请求多少条数据传到后台接口，后台会返回你请求的这几条数据，在用户下拉一次时再去请求一次接口，这个是已经是第二页了，每请求一次当前页面+1，存放数据的数组对象也将每次请求到的数据加起来，用 concat( ) 拼接每一次获取到的数据，每一次获取数据的时候去判断是不是当前的数据长度是不是小于你请求的数据大小，如果小于就说明当前页是最后一页，就需要去显示 “没有更多数据” ，并且将记录当前页的数据重置为第一页

<!--pages/index/reservation/index.wxml-->
<comTopbar  backBtnColor="{{ backBtnColor}}" needback="{{needback}}" backgroundColor="{{ backgroundColor}}" titlecolor="{{titlecolor}}" title="{{title}}"></comTopbar>
<view  catchtouchmove="{{hiddenName}}">
<swiperView swiperImgBox="{{swiperImgBox}}"  imgHeight="{{750}}" imgWidth="{{750}}"></swiperView>
<view class="context">
	<scroll-view class="tab_title" scroll-x="true">
			<view class="title_box">
				<view class="item {{i==index? 'atv_item': ''}}"  wx:for="{{houseClassTitle}}"  wx:key="key" bindtap="switchMenu" data-index="{{index}}" >{{item.type_name}}</view>
			</view>
	</scroll-view>
		<date></date>
		<!-- item -->
		<view>
			<reservationbox  bind:status="gorese" recoItem="{{recoItem}}"></reservationbox>
		</view>
		<view class="text_center {{showstatus?'show':'hidden'}}">没有更多数据了</view>
</view>
</view>
<goreservation bind:statusHidden="cancel" houseDetail="{{houseDetail}}" style="margin-top:{{navBarH}}px" class="{{hiddenName?'show':'hidden'}}"></goreservation>

这个列表由于在首页还要用到，所以是个公共组件< reservationbox > ，{{recoItem }}用于存放这个数据数组，{{ showstatus }}控制 “没有更多数据了” 显示还是隐藏