2

所以，我正在使用无限滚动（http://infiniteajaxscroll.com/docs/getting-started.html）。

但是，当主要内容在“mdl-js-layout”内时，无限滚动功能不起作用（如下所示）

所以，如果我删除了mdl-js-layout最外层的 div，那么无限滚动就可以工作，否则它就不起作用。

<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 标签来获得有价值的帮助。

有人我应该尝试什么吗？

谢谢！

4

2 回答 2

0

我在动态网站和 mdl 方面也遇到了一些问题。

在他们的网站上，我找到了以下关于动态网站的段落，这对我的情况有所帮助： 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-31T13:45:45.990 回答
0

这解决了我这边的问题：

材料设计将主包装高度锁定为 100%；

.mdl-layout__container .mdl-js-layout

这避免了砌体以继续加载更多元素

所以在你的自定义 CSS 添加：

.mdl-layout__container, .mdl-js-layout{
  height: auto;
}
于 2018-02-27T19:35:35.973 回答