QT qml ScrollBar mobile app-style scrolling axis

Scroll axis attached to the flickable component
Automatically placed in the right place
Show when dragging, disappears when not moving
Lisence:mit please keep this statement
Author:surfsky.cnblogs.com 2014-12

"Look at the effect first"

Download

http://download.csdn.net/detail/surfsky/8426563

"Core Code"

1 ScrollBar {2 Id:root3opacity:04 orientation:Qt.Vertical5 6     //binding to Flickable components7 Property flickable target:flickable{}8 9     //locationTenWidth:orientation==qt.vertical? 10:target.width-10 OneHeight:orientation==qt.vertical? Target.height-10:10 AAnchors.right:orientation==qt.vertical?target.right:undefined -Anchors.bottom:orientation==qt.vertical?Undefined:target.bottom -  the     //scrolling -Position:orientation==qt.vertical?target.visibleArea.yPosition:target.visibleArea.xPosition -Pagesize:orientation==qt.vertical?Target.visibleArea.heightRatio:target.visibleArea.widthRatio -  +  -     //Scroll axis when moving + connections{ A Target:root.target at onmovingverticallychanged: { -             if(target.movingvertically) - Fadein.start (); -             Else - Fadeout.start (); -         } in onmovinghorizontallychanged: { -             if(target.movinghorizontally) to Fadein.start (); +             Else - Fadeout.start (); the         } *     } $numberanimation {Id:fadein; Target:root; Properties: "Opacity"; duration:400; from:0; To:1 }Panax Notoginsengnumberanimation {id:fadeout; target:root; properties: "Opacity"; duration:400; from:1; to:0 } -}

"Invoke Sample"

1     Flickablescrollbar {2        target:view3        Orientation: Qt.vertical4     }

QT qml ScrollBar mobile app-style scrolling axis