(顶部/底部)导航方案(1)TabBar+StackLayout

ApplicationWindow{ 

    visible: true
    id:window
    width:320
    height:480


    TabBar {
        id: bar
        width: parent.width
        //当前选中项下划线色
        Material.accent:"#ffffff"

        //背景色
        Material.background: "#157CA1"
        //没被选中的字体颜色
        Material.foreground: "#cccccc"
        font.bold: true
        font.pixelSize: 18
        TabButton {
            text: qsTr("社区") 

        }
        TabButton {
            text: qsTr("茶聊馆")
        }
        TabButton {
            text: qsTr("朋友圈")
        }
    }

    Flickable{
        height:parent.height - bar.height
        width: parent.width
        contentHeight: stack.height
        anchors.top: bar.bottom
        clip: true
        ScrollBar.vertical: ScrollBar{}
        StackLayout {
            id:stack
            width: parent.width
            currentIndex: bar.currentIndex
            Rectangle{
                id: homeTab
                width: 100
                height: 2000
                color: "#b54040"
                gradient: Gradient {
                    GradientStop {
                        position: 0.02;
                        color: "#ff0000";
                    }
                    GradientStop {
                        position: 0.75;
                        color: "#ffffff";
                    }
                }
            }
            Rectangle {
                id: discoverTab
                width: 100
                color: "yellow"
            }
            Rectangle {
                id: activityTab
                width: 100
                color: "blue"
            }
        }
    }



}

用此实现一个类似新闻的界面:

Item {

    TabBar {
        id: bar
        width: parent.width
        //当前选中项下划线色
        Material.accent:"#ffffff"

        //背景色
        Material.background: "#157CA1"
        //没被选中的字体颜色
        Material.foreground: "#cccccc"
        font.bold: true
        font.pixelSize: 18
        TabButton {
            text: qsTr("社区")
        }
        TabButton {
            text: qsTr("茶聊馆")
        }
        TabButton {
            text: qsTr("朋友圈")
        }
    }

      property var pics:[
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
         {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
         {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图1.jpg"},
        {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图2.jpg"},
         {pic:"qrc:/PageManger/SheQuPage/res/社区列表贴图3.jpg"},
    ]
    Flickable{
        id:flick

        height:parent.height - bar.height
        width: parent.width
        contentHeight: stack.height
        anchors.top: bar.bottom
        clip: true
        ScrollBar.vertical: ScrollBar{}
        StackLayout {
            id:stack
            width: parent.width
            height: homeTab.height
            currentIndex: bar.currentIndex
            Rectangle{
                id: homeTab
                width: parent.width //可以不指定 col会冲出尺寸限制
                height: col.height
                color: "#034963"
                Column{
                    id:col
                    Loader{
                        id:lunboItem
                        width: flick.width
                        height: width*0.5
                        sourceComponent: lunbo
                    }

                    ListView{
                        id:newsView
                        width: flick.width
                        spacing: 1 //间隔1 间隔颜色将会被 homeTab的背景色填充
                        height: contentHeight
                        model: pics
                        delegate: BorderImage {
                            source: pics[index].pic
                            width: parent.width
                            height: sourceSize.height/sourceSize.width*width
                        }

                    }

                }



            }
            Rectangle {
                id: discoverTab
                width: 100
                color: "yellow"
            }
            Rectangle {
                id: activityTab
                width: 100
                color: "blue"
            }
        }
    }


    Component{
        id:lunbo;
        Item {
            SwipeView{
                id:sw;
                clip: true
                width: parent.width
                anchors.horizontalCenter: parent.horizontalCenter
                height: parent.height;
                currentIndex:pageit.currentIndex;

                Item {
                    id:item1;
                    Rectangle{
                        anchors.fill: parent

                        BorderImage {
                            anchors.fill: parent
                            id: name
                            source: "qrc:/PageManger/SheQuPage/res/社区轮播1.png"
                            border.left: 5; border.top: 5
                            border.right: 5; border.bottom: 5

                        }
                        //点击后发生的事情。。。
                        MouseArea{
                            anchors.fill: parent;
                            onClicked: {
                            }
                        }
                    }
                }

                Item {
                    id:item2;
                    Rectangle{
                        anchors.fill: parent

                        BorderImage {
                            anchors.fill: parent
                            source: "qrc:/image/2.jpg"
                            border.left: 5; border.top: 5
                            border.right: 5; border.bottom: 5

                        }
                    }
                }

                Item {
                    id:item3;
                    Rectangle{
                        anchors.fill: parent

                        BorderImage {
                            anchors.fill: parent
                            source: "qrc:/image/3.jpg"
                            border.left: 5; border.top: 5
                            border.right: 5; border.bottom: 5

                        }


                    }
                }


            }
            PageIndicator{
                id:pageit;
                anchors.bottom: sw.bottom;
                anchors.bottomMargin: 10;
                anchors.horizontalCenter: sw.horizontalCenter
                count: 3;
                currentIndex: sw.currentIndex;
            }
            Timer{
                running: true;
                repeat: true
                id:time;
                interval: 1500;
                onTriggered: {
                    var  Tmp = pageit.currentIndex;
                    Tmp++;
                    if(Tmp>2)
                    {
                        Tmp=0;
                    }

                    pageit.currentIndex = Tmp;
                }
            }
        }

    }
}