[F7-Core] FAB as View child event fires multiple times

1

Hi, I’m trying to use FAB / Floating Action Button on every page.

I put the FAB as view child:

  <div class="view view-main view-init safe-areas" data-url="/">

    <!-- Floating Action Button -->
    <div class="fab fab-left-bottom cart-fab">
      <a href="#">
        <i class="cart-icon icon fas fa-shopping-cart md-only"></i>
        <i class="cart-icon icon f7-icons ios-only">cart</i>
      </a>
    </div>

  </div>

It displays correctly and on every page.

The problem is when I use On Click event it fires multiple times when you navigate.
For example if you navigate through 3 routes, and then click the FAB, the click event will fire 3 times.

I put the On Click event on the same app.f7.html page that contains the main-view. Like this:

<script>
    export default {
        on: {
            pageInit() {
                var self = this;
                var app = self.$app;
                var $ = self.$;

                var shopIdParam = app.view.main.router.currentRoute.params.shopId;

                $('.cart-fab').on('click', function() {
                    console.log("click cart-fab");
                    let itemList = listItems(storeIdParam);
                    if (itemList.length > 0) {
                        app.views.main.router.navigate({
                            name: 'cart',
                            params: {
                                shopId: shopIdParam,
                            }
                        });
                    } else {
                        app.dialog.alert("Empty cart.");
                    }
                });
            }
        }
    }
</script>

Could the problem be that I’m using On Click event on PageInit()?

If so, where should I put this logic event?

Another thing I’ve found it’s that the F7-Icon doesn’t show on iOS when I put the FAB as View child.
On Android (MD) it loads the FontAwesome icon correctly.

2

Because you add and add event listeners to same FAB button. You need to properly detach your click event when on pageBeforeRemove

3

Thank you.

on: {
     pageBeforeRemove() {
        $('.cart-fab').off("click");
     }
}

Did the trick.

What about the FAB F7-Icon not showing on iOS?