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. ...
随机推荐
- vue v-for详解
1.Vue动态渲染列表------v-for用法详解: Html: <figure v-for="list in lists"> <div> ...
- Shell执行SQL,并存入变量
shell的语法还是比较严格的(比如变量赋值,两边不能用等号) #!/bin/bash ids=$(mysql -h172. -uroot -p1qaz@WSX -N -e "select ...
- 洛谷p1008 三连击
https://www.luogu.org/problemnew/show/P1008 题目描述 将1,2,3,4,5,6,7,8,9共9个数分成3组,分别组成3个三位数,且使这3个三位数的值构成1: ...
- PAT甲级——A1011 World Cup Betting
With the 2010 FIFA World Cup running, football fans the world over were becoming increasingly excite ...
- String和StringBuffer的区别;字符串的一些基本方法
String 和 StringBuffer区别 字符串广泛应用 在Java 编程中,在 Java 中字符串属于对象,Java 提供了 String 类来创建和操作字符串. 需要注意的是,String的 ...
- KOA 学习(四)
响应(Response) Koa Response 对象是对 node 的 response 进一步抽象和封装,提供了日常 HTTP 服务器开发中一些有用的功能. response.header Re ...
- 根据网站运行日志猜测的百度蜘蛛ip
da大部分文章都是吵来吵去,不准确 所以就不参考那些沙雕的文章了,直接自己统计一个 123.125.71.117 123.125.71.58 220.181.108.115 220.181.108.1 ...
- javax.el.PropertyNotFoundException: Property 'studentAge' not found on type com.hs.model.StudentModel
mi明明已经把这个字段重构了,为啥还这样提示呢?整个工程全部 查找也找不到这个字段了啊
- python中str的常用方法汇总(1)
a = 'strABC' # Strabc : 首字母大写,其他全部小写 b = a.capitalize() print(b) # STRABC : 全部大写 c = a.upper() print ...
- Docker 私有仓库下载镜像
1.添加私有仓库路径 vim /etc/sysconfig/docker --insecure-registry 192.168.105.30:5000 注:版本差异 2.下载镜像 docker pu ...