Framework7 下拉刷新
html结构
<div class="page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class="page-content pull-to-refresh-content" data-ptr-distance="55">
<!-- Default pull to refresh layer-->
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div> <!-- usual content below -->
<div class="list-block">
...
</div>
</div>
</div>
js调用
var myApp = new Framework7(); var $$ = Dom7;
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content'); // Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
//刷新操作// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
Framework7 下拉刷新的更多相关文章
- framework7 下拉刷新、无限滚动
下拉刷新: html: <div class="page-content ptr-content"> <%--下拉刷新图标--%> <div clas ...
- Android SwipeRefreshLayout 下拉刷新——Hi_博客 Android App 开发笔记
以前写下拉刷新 感觉好费劲,要判断ListView是否滚到顶部,还要加载头布局,还要控制 头布局的状态,等等一大堆.感觉麻烦死了.今天学习了SwipeRefreshLayout 的用法,来分享一下,有 ...
- 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载
title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...
- listview下拉刷新和上拉加载更多的多种实现方案
listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局 android系统为listview提供了addfootview ...
- Xamarin. Android实现下拉刷新功能
PS:发现文章被其他网站或者博客抓取后发表为原创了,给图片加了个水印 下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. ...
- android使用PullToRefresh实现上拉加载和下拉刷新效果
其实很早前就在博客园中也写过官方的下拉刷新控件SwipeRefreshLayout,但是这个控件仅仅支持下拉刷新,用起来还算可以.然而在我们实际开发应用中,很多地方都不止有下拉刷新,而且还有上拉加载的 ...
- android官方下拉刷新控件SwipeRefreshLayout的使用
可能开发安卓的人大多数都用过很多下拉刷新的开源组件,但是今天用了官方v4支持包的SwipeRefreshLayout觉得效果也蛮不错的,特拿出来分享. 简介:SwipeRefreshLayout组件只 ...
- 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据
感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
随机推荐
- Servlet开发总结(一)
一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口. 用户若想用发一个动态web资源(即开发一个Java程序 ...
- Java 8 的新特性和Java 的4种引用方式
一.接口的增强 Java 8允许我们给接口添加一个非抽象的方法实现,只需要使用 default关键字即可,这个特征又叫做扩展方法,示例如下: interface Formula { double ca ...
- SSM2-搭建maven常见的错误以及解决方法
1.项目中的jdk版本电脑自带的jdk版本不一致 mavne-parent 的pom.xml文件 <!-- java编译插件 --> <plugin> <groupId& ...
- 在VUE中使用Echarts
第一步:下载echarts npm install echarts --save 第二步:在项目中main.js引入 import echarts from 'echarts' Vue.prototy ...
- 关于JavaScript的43道题①
最近在github上大火的43到js代码题,有很多人搬运.原链接https://github.com/lydiahallie/javascript-questions 1.下面代码的输出是什么? fu ...
- 用js实现base64编码器
base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用js实现b ...
- HDU1950
//虽然是一道LIS问题,但是还是第一次用O(n*lgn)这种算法,赶角波错哈哈哈哈....至少今天有所收获 #include<cstdio> #include<cstring> ...
- CesiumLab V1.2 新功能 倾斜数据处理
一转眼又是一周的时间,我们的实验室功能又强大了. 照旧我们先放毒,放图,图,太晚了,字都敲不到一起了 lod以及包围盒 大雁塔实例,按楼层单体化 倾斜数据处理参数设置 简单介绍一下 Ces ...
- 外观模式(Facade)(门面模式、子系统容易使用)
外观(Facade)模式的定义:是一种通过为多个复杂的子系统提供一个一致的接口,而使这些子系统更加容易被访问的模式.该模式对外有一个统一接口,外部应用程序不用关心内部子系统的具体的细节,这样会大大降低 ...
- Oracle 优化效率
一.链接: ORACLE多表查询优化 oracle的 分表 详解 -----表分区 Oracle数据库查询优化方案(处理上百万级记录如何提高处理查询速度) 数据库SQL优化大总结之 百万级数据库优化方 ...