2

ons-carousel-itemコンポーネントをons-carouselコンポーネントにjsで追加した場合refresh()メソッドを読んでレイアウトを更新する必要があります。

とonsenuiのガイドに記載されているのですが、具体的にどのようにjsに組み込めば良いのかわかりません。

お分かりになる方ご教示ください。

1 件の回答 1

2

Let’s Build a Weather App using AngularJS and Onsen UI!

を参考に、実例のサンプルを改造してみました。
Addボタンをタップすると、ons-carousel-itemがGRAYから順に追加されます。
この場合、ng-repeatで配列分を回していますが、配列に追加しただけではons-carousel-itemに反映されないため、refresh()を実行してons-carousel-itemを更新します。
setImmediate()は、待機中のタスクがない状態でコールバックする関数で、これを使わないとうまく画面に反映されませんでした。

<!DOCTYPE HTML>
<html la="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <script>
var app = ons.bootstrap("myApp", ["onsen"]);
app.controller("page1Controller", ["$scope", function($scope) {
    var colorTable = [
        {
            style:  "background-color: gray;",
            name:   "GRAY"
        },
        {
            style:  "background-color: #085078;",
            name:   "BLUE"
        },
        {
            style:  "background-color: #373B44;",
            name:   "DARK"
        },
        {
            style:  "background-color: #D38312;",
            name:   "ORANGE"
        },
        {
            style:  "background-color: red;",
            name:   "RED"
        },
    ];
    ons.ready(function() {
        $scope.colorTable = [];
    });
    $scope.addColor = function() {
        if ($scope.colorTable.length < colorTable.length) {
            $scope.colorTable.push(colorTable[$scope.colorTable.length]);
            setImmediate(function() {
                myCarousel.refresh();
                if ($scope.colorTable.length > 1) { 
                    myCarousel.setActiveCarouselItemIndex($scope.colorTable.length);
                }
            });
        }
    };
}]);
    </script>
    <style>
ons-carousel-item {
    display: table;
    text-align: center;
}
.item-label {
    display: table-cell;
    vertical-align: middle;
    color: white;
    line-height: 1;
    font-size: 48px;
    font-weight: bold;
}
.cover-label {
    text-align: center;
    position: absolute;
    left: 0px;
    width: 100%;
    bottom: 10px;
    color: white;
}
    </style>
</head>
<body>
    <ons-navigator var="myNavigator">
        <ons-page ng-controller="page1Controller">
            <ons-toolbar>
                  <div class="center">Carousel</div>
                  <div class="right"><ons-toolbar-button ng-click="addColor()">Add</ons-toolbar-button></div>
            </ons-toolbar>
            <ons-carousel swipeable overscrollable auto-scroll fullscreen var="myCarousel">
                <ons-carousel-item style="{{color.style}}" ng-repeat="color in colorTable">
                    <div class="item-label">{{color.name}}</div>
                </ons-carousel-item>
                <ons-carousel-cover><div class="cover-label">Swipe left or right</div></ons-carousel-cover>
            </ons-carousel>
        </ons-page>
    </ons-navigator> 
</body>
</html>
1
  • 細かく説明いただきありがとうございます! おかげさまで実装できました!
    – タック
    Commented 2015年9月14日 7:04

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。