How to show 'Virtual Slides' in a f7-swiper-slide?


#1

I just discovered the ‘Virtual Slides’ in F7’s Swiper, which is a really great addition and works fine as well.

But there’s something I don’t get my head around:

What I would like to do, is to show an arbitrary number of dynamic slides. Much like in the documentation about Virtual List, where I just keep the properties of a slide in an array and render a template inside the slide. (e.g. background-image, text, etc…)

But right now I don’t understand how to do that, since a swiper-slide has no slots…

I think I am very close already, but I seem to be missing something.

Here’s my current template:

I pass all parameters in virtual: {slides: [], renderExternal: renderExternal), etc… (like shown in the Virtual List documentation.

If I remove f7-swiper-slide and leave the f7_swiper empty and then put the whole

into my slides-array (as a string), everything works fine, but as soon as I add the f7-swiper-slide I get this error:
Error in render: “TypeError: undefined is not an object (evaluating ‘_vm.vlData.slides’)”

btw: The Component’s renderExternal method is called and shows the slides, right before the error is thrown.

Any help appreciated

thanks


#2

There were 2 problems here (after adapting to these problems, now it works fine):

  1. renderExternal callback passes only one parameter, where the virtual data is passed as param1

renderExternal(vl)

in the VirtualList example it passes two parameters:

renderExternal(vl, vlData)

The renderSlide callback can’t return a component, but only a string literal containing the complete swiper-slide node to render.


#3

This is what works in Vue-way, to render virtual slides:

<template>
  <f7-page>
    <f7-navbar title="Swiper Slider" back-link="Back"></f7-navbar>
    <f7-swiper
      style="height: 200px"
      :params="{virtual: { slides, renderExternal }}"
    >
      <f7-swiper-slide
        v-for="(slide, index) in virtualData.slides"
        :key="index"
        :style="{left: `${virtualData.offset}px`}"
      >{{slide}}</f7-swiper-slide>
    </f7-swiper>

  </f7-page>
</template>
<script>
  import { f7Navbar, f7Page, f7Swiper, f7SwiperSlide } from 'framework7-vue';

  export default {
    components: {
      f7Navbar,
      f7Page,
      f7Swiper,
      f7SwiperSlide,
    },
    data() {
      return {
        slides: (function () {
          var slides = [];
          for (var i = 0; i < 600; i += 1) {
            slides.push('Slide ' + (i + 1));
          }
          return slides;
        }()),
        virtualData: {
          slides: [],
        },
      }
    },
    methods: {
      renderExternal(data) {
        this.virtualData = data;
      }
    },
  };
</script>


#4

That’s what I did - the problem arose, because I followed the Virtual-List examples from the list component and there the callback is slightly different. Now it works great!


#5

Yeah, Swiper has a bit different arguments there http://idangero.us/swiper/api/#virtual