当前位置: > > > Framewrok7 - 下拉刷新功能的实现(附样例)

Framewrok7 - 下拉刷新功能的实现(附样例)

在移动应用开发中,列表的下拉刷新是一个很常见的功能。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