zoukankan      html  css  js  c++  java
  • 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")
         
        // }
         
        // }
         
        }
  • 相关阅读:
    sqlserver 自学笔记 函数实训 学分学期转换函数的设计
    jquery dom操作
    jquery clone方法
    Go开发常见陷阱
    Go 语言从新手到大神:每个人都会踩的五十个坑(转)
    Go文件操作大全
    linux下安装go
    Go 学习笔记
    分布式系统设计系列 -- 基本原理及高可用策略 (转)
    安装Redis图形监控工具---RedisLive
  • 原文地址:https://www.cnblogs.com/wxmwanggood/p/10912544.html
Copyright © 2011-2022 走看看