Framework7 无限滚动
html结构
<div class="page">
<div class="page-content infinite-scroll">
...
</div>
</div>
<div class="page-content infinite-scroll">
<div class="list-block">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</li>
...
<li class="item-content">
<div class="item-inner">
<div class="item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<!-- Preloader -->
<div class="infinite-scroll-preloader">
<div class="preloader"></div>
</div>
</div>
js调用
var myApp = new Framework7(); var $$ = Dom7; // Loading flag
var loading = false; // Last loaded index
var lastIndex = $$('.list-block li').length; // Max items to load
var maxItems = 60; // Append items per load
var itemsPerLoad = 20; // Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () { // Exit, if loading in progress
if (loading) return; // Set loading flag
loading = true; // Emulate 1s loading
setTimeout(function () {
// Reset loading flag
loading = false; if (lastIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
} // Generate new items HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
} // Append new items
$$('.list-block ul').append(html); // Update last loaded index
lastIndex = $$('.list-block li').length;
}, 1000);
});
Framework7 无限滚动的更多相关文章
- framework7 下拉刷新、无限滚动
下拉刷新: html: <div class="page-content ptr-content"> <%--下拉刷新图标--%> <div clas ...
- iOScollectionView广告无限滚动(Swift实现)
今天公司里的实习生跑过来问我一般App上广告的无限滚动是怎么实现的,刚好很久没写博客了,就决定写下了,尽量帮助那些处于刚学iOS的程序猿. 做一个小demo,大概实现效果如下图所示: 基本实现思路: ...
- Infinite Scroll - jQuery & WP 无限滚动插件
无限滚动(Infinite Scroll)也称为自动分页.滚动分页和无限分页.常用在图片.文章或其它列表形式的网页中,用来在滚动网页的时候自动加载下一页的内容.Infinite Scroll 这款 ...
- [Unity3D插件]2dtoolkit系列二 动画精灵的创建以及背景图的无限滚动
经过昨天2dtoolkit系列教程一的推出,感觉对新手还有有一定的启发作用,引导学习使用unity 2dToolKit插件的使用过程,今天继续系列二——动画精灵的创建,以及背景图的无限循环滚动,在群里 ...
- 基于HTML5+CSS3的图片旋转、无限滚动、文字跳动特效
本文分享几种基于HTML5+CSS3实现的一些动画特效:图片旋转.无限滚动.文字跳动;实现起来均比较容易,动手来试试! 一.图片旋转 效果图如下: 这个效果实现起来其实并不困难.代码清单如下: < ...
- LoopBar – Tap酒吧与无限滚动
相约 LoopBar – 标签栏与无限滚动为Android由Cleveroad 在Cleveroad我们最近认识到通过使用任何一个应用程序类别的导航,导航面板是很无聊和琐碎.这就是为什么我们的设计师的 ...
- Android 高级UI设计笔记09:Android如何实现无限滚动列表
ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们提供了一个良好,整洁的用户体验 ...
- 无限滚动 --demo
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content=&q ...
- 10 个 jQuery 的无限滚动的插件:
很多社交网站都使用了一些新技术来提高用户体验,而无限滚动的翻页技术就是其中一项,当你页面滑到列表底部时候无需点击就自动加载更多的内容. 下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. ...
随机推荐
- Consul3-使用consul作为配置中心
在前面的文章中学习了consul在windows下的安装配置,然后consul作为spring boot的服务发现和注册中心,详细的参考: https://blog.csdn.net/j9038291 ...
- redis常见的面试题
redis和memched有什么区别,为什么单线程的redis比多线程的memched效率高 string:ky类型 hash:字典redis的哈希结构可以使你像在数据库中更新一个属性一样只修改某一项 ...
- springboot拦截器之验证登录
添加jar包,这个jar包不是必须的,只是在拦截器里用到了,如果不用的话,完全可以不引入 <dependency> <groupId>org.apache.commons< ...
- ubuntu 环境下向GitHub上传(push)每次都需要用户名密码问题
这里使用的系统环境是ubuntu16.04,通过Git向GitHub仓库pull/push,使用https方式每次都需要输入用户名和密码,是解决此问题的方法. 一.应该确保你的系统上已经安装了Git ...
- Winform 分页
1.图列展示 2.分页控件代码 Paging.Designer.cs partial class Paging { /// <summary> /// 必需的设计器变量. /// < ...
- ios h5 出现的问题
这几天在测试的时候,忽然发现手机ios 页面中的input 样式出现问题,安卓就没事. 实际应该是第一张图,在ios中出现的结果为第二张图 出现这个原因,主要是ios系统自带的设置,解决方法为 ...
- HDU3486 RMQ
/*多么变态的一道题,交了18次*/ #include<cstdio> #include<cstring> #include<cmath> #define max( ...
- spring cloud深入学习(六)-----熔断监控Hystrix Dashboard和Turbine
Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各Hystrix Command的请求响应时间, 请求成功率等数 ...
- java使用正则表达式,去除windows系统中文件名的非法路径
w哦我爬取一个页面,并且把附件下载下来,保存,有的时候文件名,带*号,所以,无法保存 这时候就要删除所有的非法字符 String fileName = resourceName + fileTypt; ...
- linux系统服务
系统服务分类,根据其使用的方法来分,可以被分为三类 a.由init控制的服务:基本都是系统级别的服务,运行级别这一章讲的就是这一类的服务 b.由System V启动脚本启动的服务:和我们打交道最多的一 ...