带指数的UI5图片库（Carousel或Paginator）

Question

我想构建一个图库（在灯箱（Overlay）中），其中Indices显示当前显示图像的索引。像：

我很少会有超过5张照片，我需要“滑动”手势才能显示下一张/上一张和箭头。

首先我认为sap.ui.commons.Carousel是完美的，但由于我没有找到任何事件（例如“transitionEnd”），我不知道如何访问当前索引。分页器没有滑动事件（？）..

我很感激你会遵循的任何建议！只是为了第一步，我很乐意在这里发布我的代码。现在我需要一些帮助，从最合适的控制解决方案开始。

非常感谢。

Answer 1

为什么不使用sap.m.Carousel？它有pageChanged个事件oldActivePageId和newActivePageId参数。

以下是一个示例：

            var appCarousel = new sap.m.App("myApp", {initialPage:"carouselPage"});

            var carouselPage = new sap.m.Page("carouselPage",
                {title: "Carousel", 
                enableScrolling: false }
            );

            var page1 = new sap.m.Page("page1",
                {title: "Carousel Test Page 1", 
                enableScrolling: false }
            );

            var page2 = new sap.m.Page("page2",
                {title: "Carousel Test Page 2", 
                enableScrolling: false }
            );


            var carousel = new sap.m.Carousel("myCarousel", {

                activePage: page1,
                loop: true,

                pages: [page1, page2]
            });


            //Listen to 'pageChanged' events
            carousel.attachPageChanged(function(oControlEvent) {
                console.log(1);
                console.log( "sap.m.Carousel: page changed: old: " + oControlEvent.getParameters().oldActivePageId );
                console.log("                              new: " + oControlEvent.getParameters().newActivePageId );
            });

            carouselPage.addContent(carousel);
            appCarousel.addPage(carouselPage);
            appCarousel.placeAt("content");

            sap.ui.getCore().applyChanges();

jsbin：http://jsbin.com/tuqohoqinu/2/edit?html,css,js,console,output

您可以在输出窗口中看到更改页面。希望有所帮助。感谢。