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動態頁面材質設計

回答

相關問題