Mobile App Framework7 Browser component dmx-on:scroll event does not work

Mobile Apps Bugs
, ,
1

Hi everybody,
Was trying to set a result view from a paged query using limit and increasing the limit value while scrolling.
Based on tuto / starting at 28’40.

It did not worked so I decided to do basic test with Browser component with 2 different events that should change a variable value.

<div is="dmx-browser" id="browser_main" dmx-on:scroll="varLimitMain.setValue('testscroll')" dmx-on:resize="varLimitMain.setValue('test')"></div>

The resize event works perfectly and set the new value, not the scroll event.
(Note : My initial setvalue is an increasing process, this test was just a displaying value one)

Thanks

3

The scroll event from the browser component is the window scroll event, it will not trigger on scroll events of scrollable elements on the page. With Framework7 the page is not scrollable, it has its own container elements that are scrollable and that’s why the browser component is not triggering the scroll event. This is not a bug.

Try moving the dmx-on:scroll attribute to the Page Content component.

4

tried it on index.html page

    <!-- Scrollable page content -->
				<div class="page-content wappler-block">

					<dmx-value id="varLimitMain" dmx-bind:value="3"></dmx-value>

					<div is="dmx-browser" id="browser_main" dmx-on:scroll="varLimitMain.setValue(8)"></div>

					{{varLimitMain.value}}

Nothing happens viewing on Browser with Browser Scroll Event…

Same with my other page.
(Maybe i did not clearly understood your input.)

5

I think he meant out the onScroll here

e.g.

<div class="page-content wappler-block" dmx-on:scroll="varLimitMain.setValue(8)">
6

thanks.
Was previously out. I tried putting the Browse component everywhere. Aslo tried on a fresh new app in and out “wappler-block”… nothing happens