Disabling swipe for QWebEngineView

[Phoenox]

Hey guys,

I have a Qt Quick application with a SwipeView. One of the pages in this SwipeView is just a QWebEngineView displaying a webpage that contains an Openstreetmap map.

When I now try to navigate the map by clicking into it and and moving the mouse, the horizontal movement is interpreted as swipe, which makes navigating the map pretty hard.

The desired behavior would be, that horizontal movement is only propagated to the map and not to the SwipeView. How can I achieve this?

Since I have buttons at the footer of the SwipeView for navigating it, it would also be fine to disable swiping for the complete page, if this is easier.

Here is the code of the main.qml defining the SwipeView:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    SwipeView {
        id: swipeView
        anchors.fill: parent
        currentIndex: tabBar.currentIndex

        Page1 {
        }

        MapPage {
        }

        Page3 {
        }
    }

    footer: TabBar {
        id: tabBar
        currentIndex: swipeView.currentIndex
        TabButton {
            text: qsTr("Page1")
        }
        TabButton {
            text: qsTr("Map")
        }
        TabButton {
            text: qsTr("Page3")
        }
    }
}

And here is the code of the MapPage.qml:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtWebEngine 1.0

Item {
    WebEngineView {
        anchors.fill: parent
        anchors.margins: 20
        url: "https://www.openstreetmap.org"
    }
}

[jpnurmi]

First a note that SwipeView and its base type Container have gained some new members in Qt Quick Controls 2.1 in the upcoming Qt 5.8. These will help with your tasks:

• SwipeView::interactive
• Container::incrementCurrentIndex()
• Container::decrementCurrentIndex()

For the time being, you could add the following binding as a temporary workaround until you will be able to use the new public interactive property:

Binding {
    property: "interactive"
    target: swipeView.contentItem
    value: swipeView.currentIndex !== indexOfWebEngineView
}