ExtJS 轮播图UI组件(Carousel)

Posted 2023-04-11 重庆熊猫

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
转载请注明出处: https://www.cnblogs.com/cqpanda/p/17177307.html

更新记录
2023年4月11日 发布。

Carousel组件（Morden Toolkit）

基本使用

    xtype: \'carousel\',
    width: 500,
    height: 300,
    items: [
        
            html : \'Item 1\',
            style: \'background-color: #5E99CC\'
        , 
            html : \'Item 2\',
            style: \'background-color: #759E60\'
        , 
            html : \'Item 3\',
            style: \'background-color: yellow\'
        
    ]

指定UI风格

    xtype: \'carousel\',
    ui: \'dark\',    // ui: \'light\',
    width: 500,
    height: 300,
    items: [
        //...
    ]

指定滚动方向

    xtype: \'carousel\',
    id: \'carouselId\',
    direction: \'vertical\',    // direction: \'horizontal\',
    width: 500,
    height: 300,
    items: [
        //...
    ]

指定指示器是否显示

    xtype: \'carousel\',
    //indicator: false,
    width: 500,
    height: 300,
    items: [
        //...
    ]

指定默认显示项

    xtype: \'carousel\',
    activeItem: 1,
    width: 500,
    height: 300,
    items: [
        //...
    ]

向前切换

    xtype: \'button\',
    text: \'Prev\',
    listeners: 
        tap: function () 
            let carousel = Ext.ComponentQuery.query(\'#carouselId\')[0];
            let items = carousel.getItems();
            carousel.previous();
        
    
,

向后切换

    xtype: \'button\',
    text: \'Next\',
    listeners: 
        tap: function () 
            let carousel = Ext.ComponentQuery.query(\'#carouselId\')[0];
            carousel.next();
        
    
,

Carousel（Classic Toolkit）

默认情况下，Classic Toolkit是没有Carousel组件的。
可以在网上或者github上找找看，或者使用其他的轮播图组件。找到记得通知我啊，老铁。

本文来自博客园，作者：重庆熊猫，转载请注明原文链接：https://www.cnblogs.com/cqpanda/p/17177307.html

采用iview组件实现轮播图效果

（1）先放出示例代码，即：

 1 <template>
 2   <div class="header">
 3     <Carousel>
 4         <Carousel-item>
 5             <div class="demo-carousel">
 6               <img class="demo-img" src="http://img1.qunarzz.com/piao/fusion/1806/fc/e47aa3e1c67bbc02.jpg_750x200_0f3eecf8.jpg" />>
 7             </div>
 8         </Carousel-item>
 9         <Carousel-item>
10             <div class="demo-carousel">
11               <img class="demo-img" src="http://img1.qunarzz.com/piao/fusion/1806/fc/e47aa3e1c67bbc02.jpg_750x200_0f3eecf8.jpg" />>
12             </div>
13         </Carousel-item>
14         <Carousel-item>
15             <div class="demo-carousel">
16               <img class="demo-img" src="http://img1.qunarzz.com/piao/fusion/1806/de/df09fa61aed2d502.jpg_750x200_67472739.jpg">
17             </div>
18         </Carousel-item>
19     </Carousel>
20   </div>
21 </template>
22 
23 <script>
24 export default {
25   name: ‘HomeHeader‘
26 }
27 </script>
28 
29 <style lang="stylus" scoped>
32   .demo-img
33     width: 100%
34 </style>

（2）一开始引入图片的时候，图片会非常大，但给<img>标签中增加增加1个样式，其中将width设置成100%即可实现正常显示。

（3）但采用iview组件无法实现通过手指拨动图片的效果，而且左右显示的位置不是中间位置；

效果如下：