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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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.
<template>
<JqxScrollView ref="myScrollView"
:width="600" :height="450" :theme="'material'">
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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>
|
|
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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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>
|
|
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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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(/jquery-widgets-demo/images/imageNature1.jpg)"></div>
<div class="photo" style="background-image: url(/jquery-widgets-demo/images/imageNature2.jpg)"></div>
<div class="photo" style="background-image: url(/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>
|