池州小程序开发报价单_微信小程序完成移动端滑

日期:2021-01-12 类型:行业动态 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

微信小程序实现移动端滑动分页效果(ajax)       这篇文章主要为大家详细介绍了微信小程序实现移动端滑动分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面。

实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面。

* div id='listBox' 
* /div 

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 ++;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。