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

这是因为list-item有左右填充，carousel-item有position:absolute; transform: 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，所以我静态重复元素

具有ons-list的ons-carousel无法正确呈现初始索引=“1”

1 个答案: