这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要为大家详细介绍了微信小程序实现移动端滑动分页效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
一般在 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++;
- }
- });
- }
- });
- });
来源: http://www.phperz.com/article/17/0807/338690.html