onsen-ui 列表项显示问题中的旋转木马

Question

我正在尝试在每个列表项中制作一个带有轮播的列表，我就是这样做的

    <ons-list id ="list"  style="padding:0px;" ng-controller="ItemController">
    
    <ons-list-item ng-repeat="item in local" style="padding:0;">
      <ons-carousel  swipeable initial-index="0" style="height: 100%;width: 100 %;position: absolute;">
        <ons-carousel-item style="padding:0;">
          <ons-button modifier = "quiet" ng-click="menu.close();customSetMainPage(item.id);">
            {{item.name}}
          </ons-button>
        </ons-carousel-item>
        <ons-carousel-item>
          <ons-button ng-click="deletepresentation(item.id);local.splice($index, 1);">
                Remove
                <ons-icon icon="ion-trash-a"/>
          </ons-button>
        </ons-carousel-item>
      </ons-carousel>
    </ons-list-item>
  

    </ons-list>

现在列表正在运行，但第一次显示时显示如下：

当它应该是这样的时候：

并且在将项目添加到列表后，它显示第二个轮播项目而不是第一个：

有帮助吗？

Answer 1

Carousel 在之前的版本中有一些与您的第一个问题相关的错误，所以如果您还没有使用它，我建议您更新到最新的 Onsen UI。

此外，在实际删除项目之前，您需要将要删除的项目恢复到其初始索引。最好也将 auto-refresh 和 auto-scroll 属性添加到轮播。

在这里工作：http://codepen.io/frankdiox/pen/wKwpGZ

希望对您有所帮助。

onsen-ui 列表项显示问题中的旋转木马

onsen-ui carousel within list-item display issue

css

onsen-ui