DEV Community

HarmonyOS
HarmonyOS

Posted on

[Smart Watch] [API 6] How do I use JS to set the right swipe to exit on my wearable device?

Read the original article:[Smart Watch] [API 6] How do I use JS to set the right swipe to exit on my wearable device?

Requirement Description:

How can I use JavaScript to set the right swipe gesture to exit an application on my wearable device?

Background Knowledge:

HarmonyOS allows handling swipe gestures using the onswipe event. The application can be terminated by invoking the terminatemethod of the app module. The swipe direction needs to be checked to ensure that the exit operation is triggered only on a right swipe.

Implementation Steps:

  1. Bind the swipe event to the relevant element on the page.
  2. In the swipe event handler, check if the swipe direction is "right".
  3. If the direction is "right", call the app.terminate() method to exit the application.

Code Snippet / Configuration:

<!-- index.hml: swipe event bound to the div -->
<div class="container" touchMove>
    <text id="title">Hello {{title}}</text>
    <input type="button" value="View" style="width: 200px; height: 50px;" clickAction></input>
</div>
Enter fullscreen mode Exit fullscreen mode
// index.js:
import router from '@system.router'
import app from '@system.app'

export default {
    data: {
        title: 'World'
    },

    clickAction(){
        router.replace({
            uri: 'pages/details/details'
        });
    },

    touchMove(e){ // Swipe processing event
        if(e.direction == "right"){ // Swipe right to exit
            this.appExit();
        }
    },

    appExit(){ // Exit the app
        app.terminate();
    }
}
Enter fullscreen mode Exit fullscreen mode

Test Results:

The swipe gesture works as expected, triggering the application to exit when swiped right.

Limitations or Considerations:

Ensure that the swipe direction is properly checked, otherwise the application exit may be triggered incorrectly if any other swipe direction is detected.

Written by Bilal Basboz

Top comments (0)