angularjs - 带有 ons-list 的 ons-carousel 无法使用初始索引 ="1"正确呈现

Question

我正在尝试使用 ons-carousel 的初始项目功能。我正在使用以下代码。当我尝试将它放入 ons-list 和 initial-index="1"时，该项目向左偏移，露出其他项目的一小部分。一旦我尝试滑动它就会回到正确的位置

<section style="background-color: white">

    <ons-list ng-repeat="task in tasks">
        <ons-list-item modifier="chevron">
            <ons-carousel initial-index="1" var="taskCarousel" swipeable="" auto-scroll="" style="width: 100%; height: 70px; color: black; background-color: #33cd5f">
                <ons-carousel-item style="background-color: #33cd5f">
                    View #1 {{ task.descr }}
                </ons-carousel-item>
                <ons-carousel-item style="background-color: #5b2c7a">
                    View #2 {{ task.details }}
                </ons-carousel-item>
            </ons-carousel>
        </ons-list-item>
    </ons-list>
</section>

app.controller('TestController', function ($scope) {
    $scope.tasks = [
        {
            id: "1",
            descr: "Task Description #1",
            details: "Details of Task #1"
        },
        {
            id: "2",
            descr: "Task Description #2",
            details: "Details of Task #1"
        },
        {
            id: "3",
            descr: "Task Description #3",
            details: "Details of Task #1"
        },
        {
            id: "4",
            descr: "Task Description #4",
            details: "Details of Task #1"
        }
    ];

});

Answer 1

之所以会这样，是因为列表项具有左右填充，轮播项具有 position:absolute;转换:translate3d(-{width}px, 0px, 0px);。所以当你的第二个旋转木马项目(索引= 1)显示时，它略微保持在左侧(等于列表项目的左侧填充)。
要解决它，您可以使用此 css。

#my-section {
  margin: 0 10px;
}
#my-section ons-list-item {
  padding: 0 !important;
}
#my-section ons-carousel-item {
  display: table;
  margin: 2px 0;
  text-align: center;
}

其中 #my-section 是 section 元素的 id。它有助于编写特定于解决问题的 css，而不影响网站/应用程序的其他部分。

可以看到工作代码here .试一试，看看它是如何工作的。

注意:这个 plunker 不使用 Angular ，所以我静态地重复了元素