Onsen - 动态添加 ons-carousel-items

Question

我是使用 Onsen 框架的新手，但我遇到了一些问题。

很难解释，但我希望我能通过一些照片来解释清楚。

我遇到的问题是我将 ons-carousel 与 ons-carousel-items 一起使用，并且我正在将项目动态加载到 DOM 中。

当所选页面处于活动状态时，我已经能够使 ons-carousel-item 出现在 DOM 中，但我什么都可以看到。

当前 DOM 在加载所选页面时如下所示：

如您所见，轮播项目已加载到页面中，但我看不到任何内容，经过一段时间的搜索，我注意到项目已加载但缺少内联样式..

如果我更改页面，ons-carousel-item 会加载缺少的样式并且它可以工作。 像这样：

所以现在它可以工作了.. 但我不知道该怎么做才能修复它。

在 HTML 中是这样的：

<ons-tabbar>
  <ons-tab persistent="" page="home.html" active="true" >
    <ons-icon icon="ion-home"></ons-icon>
    <span style="font-size: 14px">Home</span>
  </ons-tab>
  <ons-tab persistent="" page="home2.html" class="app-instaList-click">
    <ons-icon icon="ion-star"></ons-icon>
    <span style="font-size: 14px">Favorites</span>
  </ons-tab>
  <ons-tab page="home3.html">
    <ons-icon icon="ion-gear-a"></ons-icon>
    <span style="font-size: 14px">Settings</span>
  </ons-tab>
</ons-tabbar>

<ons-template persistent="" id="home.html">
  <ons-page>
    <ons-toolbar>
    <div class="center">Map</div>
    </ons-toolbar>
    <div id="map"></div>
  </ons-page>
</ons-template>

<ons-template id="home2.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Single List</div>
    </ons-toolbar>
    <div class="content-padded">
      <ons-carousel fullscreen swipeable overscrollable auto-scroll auto-refresh class="insta-list" var="carousel">
      </ons-carousel>
    </div>
  </ons-page>
</ons-template>

代码如下：

$(document).on('click', '.app-instaList-click', function() {
    var insta = data.data[i];
    for (var i = 0; i < 20; i++) { 

      ons.ready(function() {
        var instaItem = $(
        '<ons-carousel-item class="insta-item">' +
          '<div class="profile">' +
            '<img src="data.data[i].user.pr"/>' +
          '</div>' +
          '<figure><a href="#">' +
            '<img src="../images/image.jpg"</a></figure>' +               
        '</ons-carousel-item>');

     instaItem.appendTo($('.insta-list'));
     ons.compile(instaItem[0]);
     });
   }
});

谢谢！

Answer 1

首先，<img src="../images/image.jpg"</figure> 有错误。应该是<img src="../images/image.jpg"></a></figure>。

尝试使用carousel.refresh()方法：http://onsen.io/reference/ons-carousel.html#method-refresh

希望对你有帮助！