如何实现使用QtQuick循环轮播图,并支持用户滑动切换



  • 如何实现使用QtQuick循环轮播图,并支持用户滑动切换

    可以互动的轮播图,就是用户以滑动的方式主动切换图片。然后这个轮播图还是可以头尾循环的那种,我现在只想到 PathView。但是不熟悉。



  • @qyvlik 我认为Qt的ListView也是可以达到效果的,通过ListView和ObjectModel,可以实现你所说的轮播图的效果。至于头尾循环,可以编程通过控制Flickable::contentX来实现。



  • 我有做过一个轮播,不过是完全自己写的,可以滑动,可以自动播放。



  • @Jason 可以循环吗?就是头尾相连的那种效果。



  • @qyvlik
    无限循环?



  • @qyvlik
    我做的就是播放到最后一个图片时候,回到第一个图片



  • @Jason 有没有具体的动态效果图啊?或者说源码?



  • @qyvlik

    写的很一般,见谅哈。
    另外这是我从代码段里抠出来的,可能要改一下才能跑

        Flickable {
            id: flickableForImage
            z: 6
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.top: parent.top
            anchors.topMargin: 3
            width: parent.width
            height: (width / 375) * 135
            contentWidth: width * 3
            contentHeight: height
    
            onMovementStarted: {
                timerForImage.running = false;
                animationForContenX.running = false;
            }
    
            onMovementEnded: {
                timerForImage.running = true;
                animationForContenX.duration = 500;
    
                var a = Math.abs( contentX - 0 );
                var b = Math.abs( contentX - width );
                var c = Math.abs( contentX - (width * 2) );
                var d = Math.min( a, b, c );
    
                if ( a == d)
                {
                    animationForContenX.to = 0;
                    animationForContenX.running = true;
                }
                else if( b == d )
                {
                    animationForContenX.to = width;
                    animationForContenX.running = true;
                }
                else if (c == d )
                {
                    animationForContenX.to = width * 2;
                    animationForContenX.running = true;
                }
            }
    
            onWidthChanged: {
                if ( animationForContenX.running )
                {
                    return;
                }
    
                contentX = 0;
            }
    
            onHeightChanged: {
                if ( animationForContenX.running )
                {
                    return;
                }
    
                contentX = 0;
            }
    
            Timer {
                id: timerForImage
                interval: 6000
                running: !pageForLogin.visible
                repeat: true
    
                onTriggered: {
                    animationForContenX.running = false;
                    animationForContenX.duration = 1000;
    
                    if ( flickableForImage.contentX <= 0 )
                    {
                        animationForContenX.to = width;
                        animationForContenX.running = true;
                    }
                    else if ( flickableForImage.contentX <= width )
                    {
                        animationForContenX.to = width * 2;
                        animationForContenX.running = true;
                    }
                    else
                    {
                        animationForContenX.to = 0;
                        animationForContenX.running = true;
                    }
                }
            }
    
            NumberAnimation {
                id: animationForContenX
                target: flickableForImage
                property: "contentX"
                easing.type: Easing.OutCubic
            }
    
            Item {
                width: parent.width
                height: parent.height
    
                Image {
                    width: parent.width / 3
                    height: parent.height
                    source: "qrc:/Mobile/Menu/TitleImage1.jpg"
                }
    
                Image {
                    x: (parent.width / 3) * 1
                    width: parent.width / 3
                    height: parent.height
                    source: "qrc:/Mobile/Menu/TitleImage2.jpg"
                }
    
                Image {
                    x: (parent.width / 3) * 2
                    width: parent.width / 3
                    height: parent.height
                    source: "qrc:/Mobile/Menu/TitleImage3.jpg"
                }
            }
    
            RectangularGlow {
                anchors.fill: parent
                z: -1
                width: parent.width
                height: parent.height
                glowRadius: 2
                spread: 0.22
                color: "#30000000"
            }
        }
    


  • @Jason 你的这段代码跑成功了吗?



  • @Jason 我先研究研究。



  • 这段代码很有用。下面是一个完整实现。

    如何实现使用QtQuick循环轮播图,并支持用户滑动切换



  • @Michael 你写的?



  • @qyvlik 是我整合了Jason的关键部分代码o(^▽^)o


 

走马观花

最近的回复

  • QQ.png

    read more
  • 原来的号上不去了。。。。。不知道咋回事,可能是Github登录的?
    这个项目时隔3年又更新了,虽然偷了很多懒。。。。

    虽然这几年我一直编译Qt,不过已经很少编译这么全套的了。。。。。

    read more
  • 第一就是进入体验期:就是网友们刚刚进入网站的时候,心态处于体验状态,自然不会充值大额,所以这个阶段提款就是正常的,不会有什么情况。第二就是网站考量期:这个阶段是网友们已经玩了一段时间了,网站就会通过网友们这些天的投注情况来考量这个客户的质量,假如是大客户的话,那你就算赢十个八个网站还是会给你提款的,因为你后面还可以给网站带来更大的利益。第三就是网站拖延期,这个阶段就是网站决定黑你但是还想让你继续充值继续玩的时候,网站会以你的IP异常,注单违规,涉嫌套利等为借口拖着就是不给你提款。第四就是网站黑钱期,这个阶段就是网站觉得你身上的利益已经被他们套光了,网站也就不想在你身上浪费时间了,所以就冻结你的账号然后拉黑你。

    在这里我想说的是,如果我们的账号还没有到网站黑钱的最后一个阶段,只是出款需要审核,总是提不了款,但账号还可以正常登录,额度可以正常转换的时候可以寇+(二二其....久连连..六舞二桑)没有前期

    read more

关注我们

微博
QQ群











召唤伊斯特瓦尔