//一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面
//实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面
一、PC端
/* *<div class=\'topicBox\' id=\'listBox\'> *</div> */
//判断元素是否进入可视区域 function see(objLiLast) { //浏览器可视区域的高度 var see = document.documentElement.clientHeight; //滚动条滑动的距离 var winScroll = $(this).scrollTop(); //距离浏览器顶部的 var lastLisee = $(objLiLast).offset().top; return lastLisee < (see + winScroll) ? true : false; } //预设页码为当前第一页 var page = 1; //获得总页码 var pageTotal = parseInt($(\'#allpage\').val()); //是否请求出AJAX的“开关”; var onOff = true; $(window).scroll(function () { //拖动滚条时,是否发送AJAX的一个“开关” $(\'.topicBox\').each(function () { //引用最后一个div var lastLi = $(\'.topicBox:last\'); //调用是否进入可视区域函数 var isSee = see(lastLi); if (isSee && onOff && page < pageTotal) {//最底部元素可见,开关开启而且还有下拉 //$(\'#loadNext\').show(); //显示正在加载图标 onOff = false; $.ajax({ url: \'/GetPageData\', type: \'GET\', dataType: \'json\', data: { page: page+1 }, asyc: false, success: function (result) { if (result.status == \'success\') { var data = result.result; for (var i = 0; i < data.length; i++) { //to do coding ... }; } //$(\'#loadNext\').hide(); //隐藏正在加载 onOff = true; page ++; } }); } }); });
二、微信小程序端:wxml
<scroll-view class="scroll-container" upper-threshold="{{sortPanelDist}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad"> <!-- 上面的scrollHeight参数必须要的,不然没法进行下一步,我这里为了兼容手机屏幕,使用的获取系统自适应高度 --> <view class="con12"> <block wx:for="{{homeList}}" wx:for-item="homeList" wx:for-index="index"> <navigator url="../home_detail/home_detail?home_id={{homeList.s_id}}"> <view class="index1-list"> <image src="{{homeList.pic_url}}" class="indeximg"> <span class="money">¥{{homeList.price}}</span> </image> <span class="cunhome-title">西厢房 · {{homeList.vil_name}}--{{homeList.s_title}}</span> <view class="describe"> {{homeList.s_desc}} </view> </view> </navigator> </block> </view> <!-- 上面是循环的数据 --> </scroll-view>
js
var page = 1; // 获取数据的方法,具体怎么获取列表数据大家自行发挥 var GetList = function (that) { wx.request({ url: \'https://m.xxiangfang.com/index.php/Home/Xiaoxxf/home_service\', //民宿预订 data: { page: page }, header: { \'Content-Type\': \'application/json\' }, method: \'GET\', success: function (res) { that.setData({ homeList: res.data }) page++; }, fail: function (res) { }, complete: function (res) { }, }) } Page({ /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; //缓冲提醒 wx.showToast({ title: \'加载中\', icon: \'loading\', duration: 400 }) //获取系统的参数,scrollHeight数值,微信必须要设置style:height才能监听滚动事件 wx.getSystemInfo({ success: function (res) { console.info(res.windowHeight) that.setData({ scrollHeight: res.windowHeight }) } }); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { var that = this; GetList(that); //页面初次展示调用第一次数据,比如说5条记录 }, bindDownLoad: function () { // 该方法绑定了页面滑动到底部的事件,下拉一次请求一次数据 wx.showToast({ title: \'加载中\', icon: \'loading\', duration: 400 }) var that = this; GetList(that); //页面拉一次,加载一次 }, })