带索引的 UI5 图片库（轮播或分页器）

Question

我想建立一个图片库（在灯箱（覆盖）中），索引显示当前显示图像的索引。喜欢：

我很少有超过 5 张图片，我需要 "swipe" 个手势来显示 next/prev 个和箭头。

起初我认为 sap.ui.commons.Carousel 会很完美，但由于我没有找到任何事件（例如 "transitionEnd"），所以我不知道如何访问当前索引。分页器没有滑动事件（？）..

如果您能提出建议，我将不胜感激！只是第一步，然后我很乐意 post 我的代码在这里。现在我需要一点帮助来开始最合适的控件解决方案。

非常感谢。

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

您可以在输出中看到页面的变化 window。希望有所帮助。谢谢。

带索引的 UI5 图片库（轮播或分页器）

UI5 Image Gallery with Indices (Carousel or Paginator)

carousel

image-gallery

sapui5

paginator