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
There were 2 problems here (after adapting to these problems, now it works fine):
- 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.
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>
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!
Yeah, Swiper has a bit different arguments there http://idangero.us/swiper/api/#virtual
1 Like