Can you add swipe touch property on webview

Hi,

I load an image from my server in a webview…Now i want the user to swipe left and right to load new url.

So can i add touch effect to webview. I tried this way but it didn’t work…

_webView = cocos2d::experimental::ui::WebView::create();
    _webView->setContentSize(visibleSize - Size(0,80));
    _webView->setAnchorPoint(Vec2::ZERO);
    _webView->setPosition(Vec2::ZERO);
    _webView->setScalesPageToFit(true);
    _webView->loadURL("http://www.testtest.com/img/1.jpg");
   
    myLayer->addChild(_webView);

auto listener1 = EventListenerTouchOneByOne::create();
     listener1->setSwallowTouches(true);

 listener1->onTouchBegan = [&](Touch* touch, Event* event){
     pointStartPos=touch->getLocation();
    return true;
 };

listener1->onTouchMoved = [&](Touch* touch, Event* event){
};
     
 listener1->onTouchEnded = [=](Touch* touch, Event* event){
    pointEndPos=touch->getLocation();
    bool is_left;
    unsigned int i_index=this->currImageIndex;
    if(pointEndPos.x - pointStartPos.x >0) {
        is_left=true;
        i_index--;
    }
    else {
        is_left=false;
        i_index++;
    }
auto dispatcher = Director::getInstance()->getEventDispatcher();
     dispatcher->addEventListenerWithSceneGraphPriority(listener1, _webView);

@slackmoehrle can you help me out here…

why this and not attaching the listener to the webview itself?

sorry, that’s old code debugging.

i attached webview

dispatcher->addEventListenerWithSceneGraphPriority(listener1, _webView);

but still swipe gesture didn’t work.

We don’t have a built in swipe gesture. I think the best thing for you to do is too add code to:

listener1->onTouchMoved = [&](Touch* touch, Event* event){
};

and when this event gets triggered, do the changes you need, that a normal swipe gesture would do.

Ok, will add the code in the method… thanks…

It still doesn’t work.

i added a pageview in my scene. when i add imageview i can swipe pages but when i add webview i cannot swipe the pages…

Here is the code -

auto pageView = PageView :: create ();

    pageView-> ignoreAnchorPointForPosition (false );
    pageView-> setAnchorPoint (Vec2 (0.5, 0.5));
    pageView-> setContentSize (Size (visibleSize.width / 2, visibleSize.height / 2));
    pageView-> setPosition (Vec2 (visibleSize.width / 2, visibleSize.height / 2));
           
    for(int i = 0; i < 4; i++)
    {
        Layout* layout1 = Layout::create();
        layout1->setContentSize(Size(visibleSize.width/2,visibleSize.height/2));
        
       cocos2d::experimental::ui::WebView  *_webView = cocos2d::experimental::ui::WebView::create();       
    _webView->setContentSize(Size(visibleSize.width/4,visibleSize.height/4));
  _webView->setPosition(Point(layout1->getContentSize().width / 2.0f, layout1->getContentSize().height / 2.0f));
    _webView->setScalesPageToFit(true);
    _webView->setTouchEnabled(true);
 
     _webView->loadURL(url);
    layout1->addChild(_webView);
        
    }
    this->addChild (pageView);

and method :

    void HelloWorld::pageViewEvent(cocos2d::Ref *pSender, cocos2d::ui::PageView::EventType type)
{
    auto pageView = dynamic_cast<PageView*>(pSender)
    auto index = pageView->getCurPageIndex();
    switch (type)
    {
        case cocos2d::ui::PageView::EventType::TURNING:
        {
            break;               
            
        default:
            break;
    }  
}

So how can i swipe pages with webview in it. Is it not possible?

If there’s a way to correctly setup touches to allow for webview scrolling inside a pageview while allowing swipe to change pages then that will be great for you to find a solution.

My suggestion until you find a solution would be to try a different user interaction.

  • You could show a single webview and implement the paging with swiping inside using a javascript+browser solution
  • You could have tabs instead of a pageview which is less interactive, but should work out without touch issues
  • You could make sure the webview content is short enough to not require scrolling and disable touch on the webview

I cannot go with any of the three options you said.

In my scenario i can disable left/right scrolling but i need top/down scrolling in a webview.

so can we disable left / right scrolling in a webview and i can implement left/right touch of pageview to swipe left and right?

Plus i cannot even add button above the webview…

This is making me crazy…making simple things is consuming so much time and i hate to change the User Experience because of such limitation…