温泉 - 动态添加ons-carousel-items

Question

我是使用Onsen框架的新手，我一直陷入困境。

很难解释，但在一些照片的帮助下，我希望我能解释清楚。

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

当所选页面处于活动状态时，我已经能够将ons-carousel项目显示在DOM中，但我可以看到任何内容。

当加载所选页面时，当前DOM看起来像这样：

正如你所看到的，on-carousel-item被加载到页面中，但我看不到任何东西，我注意到一段时间后搜索是项目已加载但是内联样式丢失..

如果我更改页面，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

希望它有所帮助！