Simulate swipes

[CesarGomezTissini]

Is it possible to simulate swipes? I need to show how a functionality works to users of my app first time when they go to it. Any suggestions?

[nanov]

Nice idea!

This should be possible.

Each slot receives a revealLeft and revealRight functions in its scope, with those one should be able to open the swipe programmatically.

Alternatively, if you reference the list component ( with ref ), you should be able to access it's references and do something like this

this.$refs.mySwipeList.$refs['list-item-1'].revealLeft(); // list-item-{index} is the internal naming convention

[CesarGomezTissini]

I'm very new in VueJS. Sound good the first option you proposed because it's more component-functional. Could you provide an example? Thanks in advances!

Edit: Correcting you, it is

this.$refs.mySwipeList.$refs['list-item-1'][0].revealLeft()

And it doesn't work as expected.

Edit 2: Ok, I noticed now it's works but first you must do a swipe. Doc doesn't explains something related to this and how to do that programmatically.

[nanov]

Hi, sorry for the delay!

Thank you for your valuable comments and tests, I've just released v1.0.21 which includes some fixes and convenience methods regarding the programmatic control over items and their actions.

You can see example usage in the demo, please let me know if it works for you!

      revealFirstRight() {
        this.$refs.list.revealRight(0);
      },
      revealFirstLeft() {
        this.$refs.list.revealLeft(0);
      },
      closeFirst() {
        this.$refs.list.closeActions(0);
      },
      closeAll() {
        this.$refs.list.closeActions();
      },

[CesarGomezTissini]

I will test it tonight and come back with feedbacks. Thanks for your support!

[CesarGomezTissini]

I'm setting a code like this:

setTimeout(() => {
        this.$refs.list.revealLeft(0)
      }, 1000)
      setTimeout(() => {
        this.$refs.list.closeActions(0)
      }, 1000)
      setTimeout(() => {
        this.$refs.list.revealRight(0)
      }, 1000)

It should be revealLeft, close it and then revealRight, but only revealRight. I have understood about setTimeOut wait for first execution and then start with next, and so on. Am I wrong?

Update: Ok, I was wrong. I solved it. Thanks a lot dude, I'm happy now!! 💃 If you could help to enhanced this code, it will apreciated too.

setTimeout(() => {
        this.$refs.list.revealLeft(0)
      }, 1000)
      setTimeout(() => {
        this.$refs.list.closeActions(0)
      }, 2000)
      setTimeout(() => {
        this.$refs.list.revealRight(0)
      }, 3000)
 setTimeout(() => {
        this.$refs.list.closeActions(0)
      }, 4000)

Evidence:

[nanov]

I'm glad it solves your problem. Your code looks fine, but i would try doing it in a promise manner. You could do something like this:

// somewhere e helper
const delay = duration => new Promise(resolve => setTimeout(resolve));

// then by your demo method
async demo() {
  this.$refs.list.revealLeft(0);
  await delay(1000);
  this.$refs.list. closeActions(0);
  await delay(1000);
  // ...
}