返回 导航

HTML5 / CSS3

hangge.com

Framewrok7 - 下拉刷新功能的实现（附样例）

作者：hangge | 2016-10-11 08:40
在移动应用开发中，列表的下拉刷新是一个很常见的功能。Framewrok7 本身就自带了一个下拉刷新组件，直接添加到页面上就可以轻松实现下拉刷新功能。而且不仅仅局限在表格上使用，其他需要下拉刷新的地方都可以使用。

一、基础功能介绍
1，效果图
（1）下面给表格添加个下拉刷新功能，下拉时表格上方会有个向下的箭头。
（2）下拉到一定距离放开后，箭头图标变成环形进度条，表示开始加载数据。（这里直接使用本地生成的随机数据作为演示）
（3）数据加载完毕后，进度条消失。表格恢复到原来位置。
         

2，使用说明
（1）对于允许下拉刷新的 page-content 容器要添加 pull-to-refresh-content 样式。
（2）页面上还需添加个下拉刷新层（pull-to-refresh-layer），用于显示箭头以及 preloader 图标。
（3）数据加载完毕后，我们要手动调用 myApp.pullToRefreshDone()。隐藏下拉层，并将表格恢复原位。

3，样例代码
（1）index.html
<!DOCTYPE html>
<html>
  <head>
    <!-- meta标签设置-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,
     maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- app标题 -->
    <title>hangge.com</title>
    <!-- 使用iOS CSS主题样式-->
    <link rel="stylesheet" href="css/framework7.ios.min.css">
    <!-- iOS related颜色样式 -->
    <link rel="stylesheet" href="css/framework7.ios.colors.min.css">
    <!-- 自定义样式-->
    <link rel="stylesheet" href="css/my-app.css">
  </head>
  <body>
    <!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>
    <!-- 所有的Views视图 -->
    <div class="views">
      <!-- 主视图（需要有"view-main"样式） -->
      <div class="view view-main">
        <!-- 顶部导航栏 -->
        <div class="navbar">
          <div class="navbar-inner">
            <!-- 标题元素（为了让页面切换时标题文字有滑动效果，添加sliding样式） -->
            <div class="center sliding">hangge.com</div>
          </div>
        </div>
        <!-- 页面容器（Pages container）由于我们使用了固定位置的navbar和toolbar，
              所以这里添加额外样式（navbar-through和toolbar-through）-->
        <div class="pages navbar-through toolbar-through">
          <!-- 首页, "data-page" 里设置页面名字 -->
          <div data-page="index" class="page">
            <div id="articles" class="page-content pull-to-refresh-content">
              <!-- 下拉刷新层 -->
              <div class="pull-to-refresh-layer">
                <div class="preloader"></div>
                <div class="pull-to-refresh-arrow"></div>
              </div>
              <!-- 列表 -->
              <div class="list-block">
                <ul>
                </ul>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- Framework7框架的js-->
    <script type="text/javascript" src="js/framework7.min.js"></script>
    <!-- 你的应用的js-->
    <script type="text/javascript" src="js/my-app.js"></script>
  </body>
</html>

（2）my-app.js 
// 初始化 app
var myApp = new Framework7({
    init: false //禁用App的自动初始化功能
});

// 为便于使用，自定义DOM库名字为$$
var $$ = Dom7;

// 添加首页视图
var mainView = myApp.addView('.view-main', {
  // 让这个视图支持动态导航栏
  dynamicNavbar: true,
});

//index页面初始化
myApp.onPageInit('index', function (page) {
  //初始数据
  refreshData();
  //下拉刷新
  $$('#articles').on('refresh', function (e) {
    //为更好的看到效果，这里加个延时
    setTimeout(refreshData,700);
  });
});

//刷新数据
function refreshData() {
  var itemHTML = "";
  for(var i=0; i<5; i++){
    itemHTML += '<li class="item-content">' +
                '  <div class="item-inner">' +
                '    <div class="item-title">测试数据'+Math.round(Math.random()*100)+'</div>' +
                '  </div>' +
                '</li>';
  }
  //重新设置数据
  $$('#articles').find('ul').html(itemHTML);
  //刷新完毕后，重置下拉状态
  myApp.pullToRefreshDone();
}

//初始化应用
myApp.init();

二、高级用法
1，修改下拉刷新的触发距离
上面的样例我们使用默认的触发距离（即下拉 44px 距离后开始执行刷新操作）。通过 data-ptr-distance 属性值我们可以自定义下拉的触发距离。 
<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>

2，下拉刷新相关事件
上面样例我们监听了下拉组件的刷新事件（refresh）。其实整个下拉过程中，各个步骤状态都有相应的事件。
Event Target Description
pullstart Pull To Refresh content<div class="pull-to-refresh-content"> 开始下拉时触发
pullmove Pull To Refresh content<div class="pull-to-refresh-content"> 下拉拖动时触发
pullend Pull To Refresh content<div class="pull-to-refresh-content"> 松开后停止下拉时触发
refresh Pull To Refresh content<div class="pull-to-refresh-content"> 进入“刷新”状态时触发
refreshdone Pull To Refresh content<div class="pull-to-refresh-content"> 刷新完毕后触发，恢复原来状态 (在pullToRefreshDone方法执行后)

3，重置下拉刷新
前面样例中，我们数据刷新完毕后调用 myApp.pullToRefreshDone() 方法重置页面上所有下拉组件，将它们恢复到初始状态。
我们也可以单独指定需要重置的对象。 
myApp.pullToRefreshDone("#articles");

4，使用代码触发下拉刷新
我们也可以在 js 中使用代码来触发下拉刷新这个操作（触发后同样有下拉移动，进度条显示等效果）。 
myApp.pullToRefreshTrigger('#articles');

5，启用/停用下拉刷新功能 
//禁止下拉刷新功能
myApp.destroyPullToRefresh('#articles')

//重新启用下拉刷新功能
myApp.initPullToRefresh('#articles')
评论

全部评论（0）

回到顶部