1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="utf-8">
  6. <title>Hello MUI</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  8. <meta name="apple-mobile-web-app-capable" content="yes">
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10.  
  11. <link rel="stylesheet" href="../css/mui.min.css">
  12. <style type="text/css">
  13. .mui-content>.mui-table-view:first-child {
  14. margin-top: -1px;
  15. }
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. <!--下拉刷新容器-->
  21. <div id="pullrefresh" class="mui-content mui-scroll-wrapper">
  22. <div class="mui-scroll">
  23. <!--数据列表-->
  24. <ul class="mui-table-view mui-table-view-chevron"></ul>
  25. </div>
  26. </div>
  27. <script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
  28. <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  29. <script>
  30.  
  31. mui.init({
  32. pullRefresh: {
  33. container: '#pullrefresh',
  34. down: {
  35. style:'circle',
  36. callback: pulldownRefresh
  37. },
  38. up: {
  39. auto:true,
  40. contentrefresh: '正在加载...',
  41. callback: pullupRefresh
  42. }
  43. }
  44. });
  45.  
  46. var count = ;
  47. function pullupRefresh() {
  48. setTimeout(function() {
  49. mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > )); //参数为true代表没有更多数据了。
  50. $(".mui-table-view").append( '<li class="mui-table-view-cell"><a class="mui-navigate-right">Item '+count+'</a></li>' );
  51. }, );
  52. }
  53.  
  54. function addData() {
  55. count++;
  56. $(".mui-table-view").prepend( '<li class="mui-table-view-cell"><a class="mui-navigate-right">Item '+count+'</a></li>' );
  57. }
  58. /**
  59. * 下拉刷新具体业务实现
  60. */
  61. function pulldownRefresh() {
  62. setTimeout(function() {
  63. addData();
  64. mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
  65. mui.toast("为你推荐了5篇文章");
  66. }, );
  67. }
  68.  
  69. </script>
  70. </body>
  71.  
  72. </html>

MUI上拉加载下拉刷新的更多相关文章

  1. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  2. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  3. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  4. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  5. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  6. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  7. SwipeRefreshLayout实现上拉加载下拉刷新

    package com.example.swiperefreshlayoutdemo; import java.util.ArrayList;import java.util.HashMap; imp ...

  8. MJRefresh(上拉加载下拉刷新)

    整理自:https://github.com/CoderMJLee/MJRefresh#%E6%94%AF%E6%8C%81%E5%93%AA%E4%BA%9B%E6%8E%A7%E4%BB%B6%E ...

  9. Flutter上拉加载下拉刷新---flutter_easyrefresh

    前言 Flutter默认不支持上拉加载,下拉刷新也仅仅支持Material的一种样式.Android开发使用过SmartRefreshLayout的小伙伴都知道这是一个强大的刷新UI库,集成了很多出色 ...

  10. 利用iscroll实现上拉加载下拉刷新

    1.首先引用isScroll插件 说明:页面加载时初始化isScroll,然后调用pullDownAction()和pullUpAction(),每次切换tab时,只需要对pullDownAction ...

随机推荐

  1. ACM数论之旅1---素数(万事开头难(>_<))

    前言:好多学ACM的人都在问我数论的知识(其实我本人分不清数学和数论有什么区别,反正以后有关数学的知识我都扔进数论分类里面好了) 于是我就准备写一个长篇集,把我知道的数论知识和ACM模板都发上来(而且 ...

  2. 初入码田--ASP.NET MVC4 Web应用开发之一 实现简单的登录

    初入码田--ASP.NET MVC4 Web应用之创建一个空白的MVC应用程序 初入码田--ASP.NET MVC4 Web应用开发之二 实现简单的增删改查 2016-07-24 一.创建T4模板,建 ...

  3. Java并发编程中的设计模式解析(一)

    Java并发编程,除了被用于各种Web应用.分布式系统和大数据系统,构成高并发系统的核心基础外,其本身也蕴含着大量的设计模式思想在里面.这一系列文章主要是结合Java源码,对并发编程中使用到的.实现的 ...

  4. SSH框架面试题集锦

    Hibernate工作原理及为什么要使用Hibernate? 工作原理: 1.读取并解析配置文件 2.读取并解析映射信息,创建SessionFactory 3.打开Session 4.创建事务Tran ...

  5. PHP中测试in_array、isset、array_key_exists性能

    测试in_array.isset.array_key_exists性能.自己写的简易测试代码: ini_set('display_errors',true); error_reporting(E_AL ...

  6. YARN结构分析与工作流程

    YARN Architecture Link: http://hadoop.apache.org/docs/r2.7.2/hadoop-yarn/hadoop-yarn-site/YARN.html ...

  7. python selenium wait方法

    遇到一个网站运行很慢,所以要等待某个元素显示出来之后再进行操作,自己手上的书上没有例子可以直接用 发现一篇文章:http://www.cnblogs.com/yoyoketang/p/6517477. ...

  8. [洛谷P5216]DLS 采花

    题目大意:有$n$个数,任意排列,排列后第$i$个数会产生贡献当且仅当$1\sim i-1$中的数不是它的因子,问所有排列的贡献和 题解:发现一个数要产生贡献要求所有它的因子在它的右边,设有$cnt_ ...

  9. VUE开发一个图片轮播的组件

    完成效果图如下: vue开发的思路主要是数据绑定,代码如下: <template> <div ref="root" style="user-select ...

  10. More than one file was found with OS independent path 'META-INF/LICENSE' | Error:Could not read \build\intermediates\typedefs.txt (系统找不到指定的文件。)

    FAQ1: Error:Could not read E:\new\PlatformLibrary\CommonLibrary\build\intermediates\typedefs.txt: E: ...