当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序实现移动端滑动分页效果代码展示

微信小程序实现移动端滑动分页效果代码展示

2018-10-08 11:07 来源: 霸界科技

摘要:微信小程序实现移动端滑动分页效果代码展示:一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面。...

期权保本理财
  微信小程序实现移动端滑动分页效果代码展示:一般在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 () {
 
  //引用最后一个p
 
  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 ++;
 
  }
 
  });
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088