Vue List - Touch-Screen Gestures
The List supports the following touch-screen gestures.
Swipe
Swipe can be used to delete an item or access the commands of the context menu. Performing this gesture raises the itemSwipe event. To handle it, assign a function to the onItemSwipe property, or subscribe to this event using the on(eventName, eventHandler) method.App.vue- <template>
- <DxList ...
- @item-swipe="onItemSwipe"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxList from 'devextreme-vue/list';
- export default {
- components: {
- DxList
- },
- // ...
- methods: {
- onItemSwipe (e) {
- // Event handling commands go here
- }
- }
- }
- </script>
Long Tap
Long tap can be used to access the commands of the context menu. Performing this gesture raises the itemHold event. To handle it, assign a function to the onItemHold property, or subscribe to this event using the on(eventName, eventHandler) method just like it is demonstrated for the swipe gesture earlier on.You can also specify the time period the UI component should wait before raising the itemHold event. For this purpose, change the itemHoldTimeout property.
App.vue- <template>
- <DxList ...
- :item-hold-timeout="1000"> <!-- wait one second before raising the "itemHold" event -->
- </DxList>
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxList from 'devextreme-vue/list';
- export default {
- components: {
- DxList
- },
- // ...
- }
- </script>
Pull Down to Refresh
This gesture refreshes data in the List. To enable it, assign true to the pullRefreshEnabled property.App.vue- <template>
- <DxList ...
- :pull-refresh-enabled="true"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxList from 'devextreme-vue/list';
- export default {
- components: {
- DxList
- },
- // ...
- }
- </script>
Performing this gesture raises the pullRefresh event. To handle it, assign a function to the onPullRefresh property, or subscribe to this event using the on(eventName, eventHandler) method just like it is demonstrated for the swipe gesture earlier on.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.