宜宾网站建设公司

微信小程序如何实现移动端滑动分页效果

这篇文章主要介绍微信小程序如何实现移动端滑动分页效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新新互联，凭借十余年的成都做网站、成都网站设计经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有近千家案例。做网站建设，选创新互联公司。

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

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

/*
*
*
*/   //判断元素是否进入可视区域  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 ++; } }); } }); });

以上是“微信小程序如何实现移动端滑动分页效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


本文标题：微信小程序如何实现移动端滑动分页效果
标题链接：http://ybzwz.com/article/gpjiie.html

其他资讯