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 下拉刷新的更多相关文章

  1. framework7 下拉刷新、无限滚动

    下拉刷新: html: <div class="page-content ptr-content"> <%--下拉刷新图标--%> <div clas ...

  2. Android SwipeRefreshLayout 下拉刷新——Hi_博客 Android App 开发笔记

    以前写下拉刷新 感觉好费劲,要判断ListView是否滚到顶部,还要加载头布局,还要控制 头布局的状态,等等一大堆.感觉麻烦死了.今天学习了SwipeRefreshLayout 的用法,来分享一下,有 ...

  3. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  4. listview下拉刷新和上拉加载更多的多种实现方案

    listview经常结合下来刷新和上拉加载更多使用,本文总结了三种常用到的方案分别作出说明. 方案一:添加头布局和脚布局        android系统为listview提供了addfootview ...

  5. Xamarin. Android实现下拉刷新功能

    PS:发现文章被其他网站或者博客抓取后发表为原创了,给图片加了个水印 下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. ...

  6. android使用PullToRefresh实现上拉加载和下拉刷新效果

    其实很早前就在博客园中也写过官方的下拉刷新控件SwipeRefreshLayout,但是这个控件仅仅支持下拉刷新,用起来还算可以.然而在我们实际开发应用中,很多地方都不止有下拉刷新,而且还有上拉加载的 ...

  7. android官方下拉刷新控件SwipeRefreshLayout的使用

    可能开发安卓的人大多数都用过很多下拉刷新的开源组件,但是今天用了官方v4支持包的SwipeRefreshLayout觉得效果也蛮不错的,特拿出来分享. 简介:SwipeRefreshLayout组件只 ...

  8. 分页插件思想:pc加载更多功能和移动端下拉刷新加载数据

    感觉一个人玩lol也没意思了,玩会手机,看到这个下拉刷新功能就写了这个demo! 这个demo写的比较随意,咱不能当做插件使用,基本思想是没问题的,要用就自己封装吧! 直接上代码分析下吧! 布局: & ...

  9. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

随机推荐

  1. Servlet开发总结(一)

    一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口. 用户若想用发一个动态web资源(即开发一个Java程序 ...

  2. Java 8 的新特性和Java 的4种引用方式

    一.接口的增强 Java 8允许我们给接口添加一个非抽象的方法实现,只需要使用 default关键字即可,这个特征又叫做扩展方法,示例如下: interface Formula { double ca ...

  3. SSM2-搭建maven常见的错误以及解决方法

    1.项目中的jdk版本电脑自带的jdk版本不一致 mavne-parent 的pom.xml文件 <!-- java编译插件 --> <plugin> <groupId& ...

  4. 在VUE中使用Echarts

    第一步:下载echarts npm install echarts --save 第二步:在项目中main.js引入 import echarts from 'echarts' Vue.prototy ...

  5. 关于JavaScript的43道题①

    最近在github上大火的43到js代码题,有很多人搬运.原链接https://github.com/lydiahallie/javascript-questions 1.下面代码的输出是什么? fu ...

  6. 用js实现base64编码器

    base-64作为常见的编码函数,在基本认证.摘要认证以及一些HTTP扩展中得到了大量应用.在前端领域,也常常把图片转换为base-64编码在网络中传输.本文将详细介绍base64的原理及用js实现b ...

  7. HDU1950

    //虽然是一道LIS问题,但是还是第一次用O(n*lgn)这种算法,赶角波错哈哈哈哈....至少今天有所收获 #include<cstdio> #include<cstring> ...

  8. CesiumLab V1.2 新功能 倾斜数据处理

    一转眼又是一周的时间,我们的实验室功能又强大了. 照旧我们先放毒,放图,图,太晚了,字都敲不到一起了   lod以及包围盒   大雁塔实例,按楼层单体化   倾斜数据处理参数设置 简单介绍一下 Ces ...

  9. 外观模式(Facade)(门面模式、子系统容易使用)

    外观(Facade)模式的定义:是一种通过为多个复杂的子系统提供一个一致的接口,而使这些子系统更加容易被访问的模式.该模式对外有一个统一接口,外部应用程序不用关心内部子系统的具体的细节,这样会大大降低 ...

  10. Oracle 优化效率

    一.链接: ORACLE多表查询优化 oracle的 分表 详解 -----表分区 Oracle数据库查询优化方案(处理上百万级记录如何提高处理查询速度) 数据库SQL优化大总结之 百万级数据库优化方 ...