Vue ScrollView API Reference

Name	Type	Default
animationDuration	Number	30
Sets or gets the animationDuration property. Specifies the duration of the animation which starts when the current page is changed. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :animationDuration="3000"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
bounceEnabled	Boolean	true
Sets or gets whether the bounce effect is enabled when pages are changed. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :bounceEnabled="false"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
buttonsOffset	Array	[0, 0]
Sets or gets the jqxScrollView's buttonsOffset property. This property sets the offset from the default location of the navigation buttons. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :buttonsOffset=" [100, 0] "> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
currentPage	Number	0
Sets or gets the jqxScrollView's currentPage property. The currentPage specifies the displayed element. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :currentPage="1"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
disabled	Boolean	false
Sets or gets the jqxScrollView's disabled property. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :disabled="true"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
height	Number \| String	320
Sets or gets the jqxScrollView's height. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
moveThreshold	Number	0.5
Sets or gets the jqxScrollView's moveThreshold property. The moveThreshold property specifies how much the user should drag the current element to navigate to next/previous element. Values should be set from 0.1 to 1. 0.5 means 50% of the element's width. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :moveThreshold="1"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
showButtons	Boolean	true
Sets or gets whether the navigation buttons are visible. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :showButtons="false"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
slideShow	Boolean	false
Indicates whether the slideShow mode is enabled. In this mode, pages are changed automatically in a time interval. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :slideShow="true"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
slideDuration	Number	3000
Sets or gets the duration in milliseconds of a time interval. The current page is changed when the time interval is elapsed. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :slideShow="true" :slideDuration="1000"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
theme	String	''
Sets the widget's theme. Include the theme's CSS file after jqx.base.css. The following code example adds the 'material' theme. `<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.material.css" type="text/css" />` Set the widget's theme property to 'material' when you initialize it. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450" :theme="'material'"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
width	Number \| String	320
Sets or gets the jqxScrollView's width. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView } } </script>
Events
pageChanged	Event
This event is triggered when the current page is changed. Code examples Bind to the `pageChanged` event of jqxScrollView. <template> <JqxScrollView ref="myScrollView" @pageChanged="onPageChanged($event)" :width="600" :height="450"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView }, methods: { onPageChanged: function (event) { alert('do something...'); } } } </script>
Methods
Name	Arguments	Return Type
back	None	None
Navigates to the previous page. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView }, mounted: function () { this.$refs.myScrollView.currentPage = 1; this.$refs.myScrollView.back(); } } </script>
changePage	index	None
Navigates to a page. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView }, mounted: function () { this.$refs.myScrollView.changePage(1); } } </script>
forward	None	None
Navigates to the next page. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView }, mounted: function () { this.$refs.myScrollView.forward(); } } </script>
refresh	None	None
Refreshes the widget. <template> <JqxScrollView ref="myScrollView" :width="600" :height="450"> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature1.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature2.jpg)"></div> <div class="photo" style="background-image: url(https://www.jqwidgets.com/jquery-widgets-demo/images/imageNature3.jpg)"></div> </JqxScrollView> </template> <script> import JqxScrollView from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxscrollview.vue'; export default { components: { JqxScrollView }, mounted: function () { this.$refs.myScrollView.refresh(); } } </script>

Properties

Events

Code examples

Methods