Vue ScrollView - Handle Scroll Gestures
The ScrollView raises the pullDown event when a user performs the pull-to-refresh gesture. Handle this event to refresh the content of the ScrollView. Note that the handling function should end with a call of the release() method to release the ScrollView.
jQuery
$(function () { $("#scrollViewContainer").dxScrollView({ height: 500, bounceEnabled: true, onPullDown: function (e) { // Commands that refresh the content go here e.component.release(); } }); });
<div id="scrollViewContainer"></div>
Angular
<dx-scroll-view [height]="500" [bounceEnabled]="true" (onPullDown)="updateContent($event)"> </dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular'; // ... export class AppComponent { updateContent(e) { // Commands that refresh the content go here e.component.release(); } } @NgModule({ imports: [ // ... DxScrollViewModule ], // ... })
Vue
<template> <DxScrollView :height="500" :bounce-enabled="true" @pull-down="updateContent" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxScrollView } from 'devextreme-vue/scroll-view'; export default { components: { DxScrollView }, methods: { updateContent(e) { // Commands that refresh the content go here e.component.release(); } } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { ScrollView } from 'devextreme-react/scroll-view'; class App extends React.Component { render() { return ( <ScrollView height={500} bounceEnabled={true} onPullDown={this.updateContent} /> ); } updateContent = (e) => { // Commands that refresh the content go here e.component.release(); } } export default App;
If an end user scrolls the content down to the bottom, the ScrollView raises the reachBottom event. You can handle it using the onReachButtom function. Note that this function should also contain a call of the release() method.
jQuery
$(function () { $("#scrollViewContainer").dxScrollView({ height: 500, onReachBottom: function (e) { // Commands that refresh the content go here e.component.release(); } }); });
<div id="scrollViewContainer"></div>
Angular
<dx-scroll-view [height]="500" (onReachBottom)="updateContent($event)"> </dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular'; // ... export class AppComponent { updateContent(e) { // Commands that refresh the content go here e.component.release(); } } @NgModule({ imports: [ // ... DxScrollViewModule ], // ... })
Vue
<template> <DxScrollView :height="500" @reach-bottom="updateContent" /> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxScrollView } from 'devextreme-vue/scroll-view'; export default { components: { DxScrollView }, methods: { updateContent(e) { // Commands that refresh the content go here e.component.release(); } } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { ScrollView } from 'devextreme-react/scroll-view'; class App extends React.Component { render() { return ( <ScrollView height={500} onReachBottom={this.updateContent}> </ScrollView> ); } updateContent = (e) => { // Commands that refresh the content go here e.component.release(); } } export default App;
If you want to process each scroll gesture performed by a user, handle the scroll event. The object passed to the handling function contains the reachedTop, reachedBottom, reachedLeft or reachedRight properties. Use them to check if scrolling has reached any of the content boundaries. Note that availability of these properties depends on the allowed scrolling direction.
jQuery
$(function () { $("#scrollViewContainer").dxScrollView({ height: 500, onScroll: function(e) { if(e.reachedBottom) { // Here go the commands to be executed when the bottom is reached } // ... } }); });
<div id="scrollViewContainer"></div>
Angular
<dx-scroll-view [height]="500" (onScroll)="scroll($event)"> </dx-scroll-view>
import { DxScrollViewModule } from 'devextreme-angular'; // ... export class AppComponent { scroll(e) { if(e.reachedBottom) { // Here go the commands to be executed when the bottom is reached } // ... } } @NgModule({ imports: [ // ... DxScrollViewModule ], // ... })
Vue
<template> <DxScrollView :height="500" @scroll="scroll"> </DxScrollView> </template> <script> import 'devextreme/dist/css/dx.light.css'; import { DxScrollView } from 'devextreme-vue/scroll-view'; export default { components: { DxScrollView }, methods: { scroll(e) { if(e.reachedBottom) { // Here go the commands to be executed when the bottom is reached } // ... } } }; </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import { ScrollView } from 'devextreme-react/scroll-view'; class App extends React.Component { render() { return ( <ScrollView height={500} onScroll={this.scroll} /> ); } scroll = (e) => { if(e.reachedBottom) { // Here go the commands to be executed when the bottom is reached } // ... } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.