QML实现网页左右滑动的轮播图效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chyuanrufeng/article/details/82664264

网页中有很多的左右滑动的图片轮动的效果。QML实现此效果的两种方式。
PageIndicator和TabBar 也对应两种样式。
其中左右滑动的动画效果是利用SwipeView的默认切换动画效果

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible= true
    width= 640
    height= 480
    title= qsTr("图片切换")


    SwipeView {
        id= swipeView
        anchors.fill= parent
        currentIndex= indicator.currentIndex

        Rectangle{
            Image {
                //id= name
                source= "./img/0.jpg"
                anchors.fill= parent
            }
        }
        Rectangle{
            Image {
                //id= name
                source= "./img/1.jpg"
                anchors.fill= parent
            }
        }
        Rectangle{
            Image {
                //id= name
                source= "./img/2.jpg"
                anchors.fill= parent
            }
        }
        Rectangle{
            Image {
                //id= name
                source= "./img/3.jpg"
                anchors.fill= parent
            }
        }



    }

    //方法1
    PageIndicator {
          id= indicator
          count= swipeView.count
          currentIndex= swipeView.currentIndex
          interactive= true //可以点击
          anchors.bottom= swipeView.bottom
          anchors.horizontalCenter= parent.horizontalCenter
      }


    //方法2
//    TabBar {
//        id= indicator
//        currentIndex= swipeView.currentIndex
//        anchors.bottom= parent.bottom
//        anchors.right= parent.right
//        width= 400
//        opacity = 0.5


//        TabButton {
//            text= qsTr("Page 1")
//        }
//        TabButton {
//            text= qsTr("Page 2")
//        }
//        TabButton {
//            text= qsTr("Page3")
//        }
//        TabButton {
//            text= qsTr("Page 4")
//        }
//    }
}