V6 How to get attributes to work on doubleTap swiper slides in V6?

1

In v5 my swiper slides on doubleTap were working perfect in v6 they stop working so I tried to pass $f7, $, $on as parameter to the action in store.js but it seems not to be working…

any ideas how to make doubleTap to work again in v6?
what changed for this in v6?

I checked documentation about migration to v6 and others documents online but regarding swiper slider nothing mentioned that changed in v6…

    initHotels({ state }, { $f7, $, $on }) {

...

              var swiper_hotels = $f7.swiper.create(
                '.swiper-container.hotels', {
                  lazy: {
                    threshold: 50,
                    observer: true,
                    loadPrevNext: true,
                    loadPrevNextAmount: 4,
                  },
                  scrollbar: {
                    el: '.swiper-scrollbar',
                    hide: true,
                  },
                  centeredSlides: false,
                  watchSlidesVisibility: true,
                  preloadImages: false,
                  lazy: true,
                  loop: false,
                  slidesPerView: 'auto',
                  spaceBetween: 5,
                  pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true,
                    clickable: true,
                  },
                  scrollbar: {
                    el: '.swiper-scrollbar',
                    hide: true,
                  },
                  on: {

                    init: function () {

                      var swiper_hotels = $f7.swiper.get('.swiper-container.hotels');
                      swiper_hotels.slideTo(0, '2500');
                      swiper_hotels.update();

                    },
                    reachBeginning: function (e) {},
                    reachEnd: function (e) {},
                    observerUpdate: function (e) {},
                    tap: function (e) {

                      if (e.type == "dblclick") return;

                    },
                    doubleTap: function (e) {

                      var $ = this.$;  //working in v5 not in v6

                      //this lines below working in v5 but not in v6 
                      if ($(e.target).closest(".swiper-slide").attr('data-id')) { 

                        var hotel_id = $(e.target).closest(".swiper-slide").attr('data-id');

                        setTimeout(function () {
                          $f7.views.main.router.navigate('/hotel/' + hotel_id + '/');
                        }, 500);

                      }


                    },

                  }
                });
2

I found the solution in v6 for doubleTap in swiper… when in home.f7.html page on page init

just add (swiper, e) and use e.target to get the data attribute as below…

$on('pageInit', function (e, page) {
console.log('pageInit', page);
...

doubleTap: function (swiper, e) {

alert(($(e.target).closest('.swiper-slide').attr('data-id')));

},
...

When it is inside store.js and if you get this error:

ReferenceError: Can't find variable: $

Add these as parameters when calling the action with $store.dispatch

$, $on

it should look like this…

´´´
$store.dispatch(‘initRequests’,{$f7, $, $on});
´´´

    initRequests({
      state
    }, {
      $f7, $, $on
    }) {
...

doubleTap: function (swiper, e) {

alert(($(e.target).closest('.swiper-slide').attr('data-id')));

},
...

I hope this help others moving from v5 to v6! I am getting used to it now and finding solutions for the errors I am facing migrating from v5.

:slightly_smiling_face: :+1: