Google动态页面材质设计

所以我用无限滚动（http://infiniteajaxscroll.com/docs/getting-started.html）。Google动态页面材质设计

然而，当主要内容是“MDL-JS-布局”的无限滚动功能不起作用（如下图所示）内

所以，如果我去掉最外层div的mdl-js-layout，然后无限滚动否则工作不起作用。

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-drawer"> 
<header class="mdl-layout__header"> 
    Head 
</head> 
<main class="mdl-layout__content"> 
    <div class="rfp_hide" id="rhm_post_show"> 
     <?php 
     if (get_query_var('paged')) { 
      $paged = get_query_var('paged'); 
     } elseif (get_query_var('page')) { 
      $paged = get_query_var('page'); 
     } else { 
      $paged = 1; 
     } 
     $args = array(    
      'paged'=>$paged, 
      'posts_per_page' => 5,    
      'orderby' => 'date',    
      'order' => 'DESC' 
      ); 
     $loop = new WP_Query($args); 
     global $post, $paged; 
     while ($loop->have_posts()) : $loop->the_post(); 
     ?> 
     <div class="rhm_post_container"> 
      Post 
     </div> 
     <?php endwhile; ?> 
     <?php wp_reset_postdata(); ?>  
    </div> 
    <nav id="rh_nav_below"> 
     <ul> 
      <li class="rh_nav_previous"><?php previous_posts_link('&laquo; PREV', $loop->max_num_pages) ?></li> 
      <li class="rh_nav_next"><?php next_posts_link('NEXT &raquo;', $loop->max_num_pages) ?></li> 
     </ul> 
    </nav> 
</main> 
</div> 


<script> 
var container = document.querySelector('#rhm_post_show'); 
var msnry = new Masonry(container, { 
    // options 
    itemSelector: '.rhm_post_container', 
    gutter: 10 
}); 

var ias = $.ias({ 
    container: '#rhm_post_show', 
    item:  '.rhm_post_container', 
    pagination: '#rh_nav_below', 
    next:  '.rh_nav_next a', 
    delay: 100 
}); 

ias.on('render', function(items) { 
    $(items).css({ opacity: 0 }); 
}); 

ias.on('rendered', function(items) { 
    msnry.appended(items); 
}); 

ias.extension(new IASSpinnerExtension()); 
ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'})); 
</script>

我问了开发商，并得到如下回应:(https://github.com/google/material-design-lite/issues/1584#issuecomment-139060676）

MDL是目前针对静态内容，所以用例与无限滚动不是我们现在支持。但是，有些人已经使MDL与动态网站一起工作，您可以通过前往StackOverflow并使用material-design-lite标签获得有价值的帮助。

有没有人我应该尝试？

谢谢！

来源

2015-09-20 steve Kim

我也有动态网站和MDDL的一些问题。

在他们的网站，我发现有关动态网站下面的段落，这有助于在我的情况： https://getmdl.io/started/index.html#dynamic

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.

他们还提供了一个例子，如何使用该功能。

来源

2017-03-31 13:45:45 cbickel

这解决了我这边的问题：

材质设计锁定的主要包装高度为100％;

.mdl-layout__container .mdl-js-layout

这避免砖石保持加载更多元素

在您的自定义CSS加载

这样：

.mdl-layout__container, .mdl-js-layout{ 
    height: auto; 
}

来源

2018-02-27 19:35:35 iitob

Google动态页面材质设计

回答

相关问题