How to get the swiper of tabs

<f7-tabs animated swipeable id="swipeable-tabs">
  <f7-tab class="page-content" id="tab-recommend" tab-active>recommend</f7-tab>
  <f7-tab class="page-content" id="tab-follow">follow</f7-tab>
  <f7-tab class="page-content" id="tab-channel">channel</f7-tab>

onF7Ready() {
console.log(this.$$(’#swipeable-tabs’)[0]); // the print object includes swiper
console.log(this.$$(’#swipeable-tabs’)[0].swiper); // print undefined
console.log(this.$f7.swiper.get(’#swipeable-tabs’)); // print undefined

I guess the init of the tabs’ swiper is after the triggering of onF7Ready. So, how to get the swiper of tabs correctly?


Yes, if you have it inside of the page, then better stick to page:init Page’s event instead:

<f7-page @page:init="onPageInit">
export default {
  methods: {
    onPageInit() {


It dosen’t work. You can check the test sample below. I wrote a sweapeale tabs and a sweaper, log them in the page:init event, only the second sweaper can be found.


Looks like an issue, will fix it. As for now, you can use $nextTick as a workaround