<ons-carousel-item>How to use the refresh() method when adding components

If you add the ons-carousel-item component to the ons-carousel component with js, you must read the refresh() method and update the layout.

and onsenui's guide, but I don't know exactly how to incorporate them into js.

Please let me know if you know.

onsen-ui

2022-09-30 18:56

1 Answers

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

I have modified the example sample with reference to .
Tap the Add button to add the ons-carousel-item from GRAY.
In this case, we are spinning the array with ng-repeat, but just adding it to the array does not reflect the ons-carousel-item, so refresh() to update the ons-carousel-item.
setImmediate() is a function that calls back with no waiting task, otherwise it would not be reflected on the screen.

<!DOCTYPE HTML>
<htmlla="ja">
<head>
    <metacharset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=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;
}
US>.item-label{
    display:table-cell;
    vertical-align:middle;
    color:white;
    line-height:1;
    font-size: 48px;
    font-weight:bold;
}
US>.cover-label{
    text-align:center;
    position:absolute;
    left:0px;
    width: 100%;
    bottom —10px;
    color:white;
}
    </style>
</head>
<body>
    <ons-navigator var="myNavigator">
        <ons-pageing-controller="page1Controller">
            <ons-toolbar>
                  <div class="center">Carousel</div>
                  <div class="right">ons-toolbar-buttonng-click="addColor()">Add</ons-toolbar-button>>
            </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>

2022-09-30 18:56

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656