用sui框架中的下拉刷新在页面没有效果,各位帮忙看看

小红红红 发布于 2016/12/06 09:38
阅读 1K+
收藏 0
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>下拉刷新</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!--<link rel="shortcut icon" href="/favicon.ico">-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">


    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">


  </head>
  <body>
  <div class="page">
     <header class="bar bar-nav">
     <h1 class='title'>下拉刷新</h1>
     </header>
<!-- content应该拥有"pull-to-refresh-content"类,表示启用下拉刷新 -->
<div class="content pull-to-refresh-content" data-ptr-distance="55">
   <!-- 默认的下拉刷新层 -->
   <div class="pull-to-refresh-layer">
       <div class="preloader"></div>
       <div class="pull-to-refresh-arrow"></div>
   </div>
   <!-- 下面是正文 -->
   <div class="card-container">
       <div class="card">
           <div class="card-header">card</div>
           <div class="card-content">
               <div class="card-content-inner">
                   这里是第1个card,下拉刷新会出现第2个card。
               </div>
           </div>
       </div>
   </div>
</div>
</div>
    <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script>
$(document).on('refresh', '.pull-to-refresh-content',function(e) {
    // 模拟2s的加载过程
    setTimeout(function() {
        var cardNumber = $(e.target).find('.card').length + 1;
        var cardHTML = '<div class="card">' +
                          '<div class="card-header">card'+cardNumber+'</div>' +
                          '<div class="card-content">' +
                            '<div class="card-content-inner">' +
                                '这里是第' + cardNumber + '个card,下拉刷新会出现第' + (cardNumber + 1) + '个card。' +
                            '</div>' +
                          '</div>' +
                      '</div>';


        $(e.target).find('.card-container').prepend(cardHTML);
        // 加载完毕需要重置
        $.pullToRefreshDone('.pull-to-refresh-content');
    }, 2000);
});
</script>
  </body>
</html>
加载中
0
陈俊凯
陈俊凯
我也遇到了,楼主解决了吗?
0
陈俊凯
陈俊凯

$.initPullToRefresh('.pull-to-refresh-content')

坑爹啊,要在之前先初始化下,加上这段代码就有效果了

x
xiaomeizi07
我像你一样先初始化,也没效果呀
0
最骚的就是你

楼主解决了吗?刚使用sui  我现在也遇到这个问题

返回顶部
顶部