thanks for the shared code! I have made my test now it seems images are updating correctly this way, I just changed
const store = ....
to
let store = ....
so I can replace the content of the store variable with new or different stores. In my case every refresh means that it calls the api to request new stores, sometimes
the request return 0 stores and sometimes > 0 and are not always the same stores etcâŚ
Here my code again after tests and working fine this way!
I just added too to test it with slidesPerView set to auto and working fine too!
slidesPerView: 'auto',
and now I am able to see one complete card and part of the second one in the viewport and refresh working ok!
Big thanks for your tips and ideas to make this work!
My code again with the changes!
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left"><a href="#" class="link back"><i class="icon icon-back"></i><span class="if-not-md">Back</span></a></div>
<div class="title">Swiper v9 test</div>
</div>
</div>
<div class="page-content ptr-content" data-ptr-mousewheel="true" @ptr:refresh="${(e,d) => refresh(d)}">
<div class="ptr-preloader"><div class="preloader"></div><div class="ptr-arrow"></div></div>
<div class="block">
<div class="swiper">
<div class="swiper-wrapper">
${stores ? $h`
${stores.length > 0 ? $h`
${stores.map(i => $h`
<div key="${i.unique}" class="swiper-slide swiper-lazy" data-background="${i.current_url}?nocache=" @click="${() => i.click() }">
<div class="fab fab-right-top color-${i.like ? 'red' : 'primary'}">
<a href="#" @click="${(e) => i.toggle(e.stopPropagation())}"><i class="f7-icons size-32">${i.liked ? $h`heart_circle_fill` : `heart_circle`}</i></a>
</div>
<div class="text-white" style="background:#000">${i.title} ${i.liked ? $h`liked` : `no like`}</div>
<div class="swiper-lazy-preloader"></div>
</div>
`)}
` : $h`
<div class="swiper-slide swiper-lazy stores-not-found">
<div class="text-black">no stores found!, please refresh</div>
</div>
`}
` : $h`
<div class="swiper-slide swiper-lazy stores-loading">
<div class="text-black">loading... please wait...</div>
</div>
`}
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</template>
<script>
export default (_,{ $el, $f7, $onMounted, $update }) => {
//const stores = [...Array(10).keys()].map(i => ({ media: `https://swiperjs.com/demos/images/nature-${++i}.jpg` }));
let stores = null;
stores = [
{id: 1, "current_url":"/static/slides/1.jpg",liked: false},
{id: 2, "current_url":"/static/slides/2.jpg",liked: true},
{id: 3, "current_url":"/static/slides/3.jpg",liked: false},
{id: 4, "current_url":"/static/slides/4.jpg",liked: true},
{id: 5, "current_url":"/static/slides/5.jpg",liked: false}
]
$update();
stores.map((i,x) => Object.assign(i,{
like: i.liked,
title: `store ${i.id}`,
toast: `open store ${x}`,
unique: $f7.utils.id('slide-xxxxx'),
toggle: () => [i.like = !i.like, $update()],
click: () => {
//$f7.toast.create({ text: i.toast, position: 'center', closeTimeout: 2000 }).open();
console.log('opening store in a new page...')
}
}));
const refresh = (done) => {
var rndStores = [
[
{id: 5, "current_url":"/static/slides/5.jpg",liked: true},
{id: 4, "current_url":"/static/slides/4.jpg",liked: true},
{id: 3, "current_url":"/static/slides/3.jpg",liked: true},
{id: 2, "current_url":"/static/slides/2.jpg",liked: true},
{id: 1, "current_url":"/static/slides/1.jpg",liked: true},
],
[
{id: 1, "current_url":"/static/slides/1.jpg",liked: false},
],
[
{id: 4, "current_url":"/static/slides/4.jpg",liked: true},
{id: 5, "current_url":"/static/slides/5.jpg",liked: true},
],
[
{id: 2, "current_url":"/static/slides/2.jpg",liked: false},
],
[
{id: 5, "current_url":"/static/slides/5.jpg",liked: false},
],
[],
[
{id: 3, "current_url":"/static/slides/3.jpg",liked: true},
{id: 2, "current_url":"/static/slides/2.jpg",liked: true},
],
[
{id: 1, "current_url":"/static/slides/1.jpg",liked: false},
],
[
{id: 4, "current_url":"/static/slides/4.jpg",liked: false},
],
];
var rndStores = rndStores[Math.floor(Math.random()*rndStores.length)];
stores = rndStores;
stores.map((i,x) => Object.assign(i,{
like: i.liked,
title: `store ${i.id}`,
toast: `open store ${x}`,
unique: $f7.utils.id('slide-xxxxx'),
toggle: () => [i.like = !i.like, $update()],
click: () => {
//$f7.toast.create({ text: i.toast, position: 'center', closeTimeout: 2000 }).open();
console.log('opening store in a new page...')
}
}));
stores.reverse();
stores.map(i => i.unique = $f7.utils.id('slide-xxxxx'));
$update().then(done).then(() => {
let s = $f7.swiper.get($el.value.find('.swiper'));
s.update();
s.slideTo(0);
[...Array(s.params.lazy.loadPrevNextAmount).keys()].forEach(s.lazy.loadInSlide);
});
};
$onMounted((p = $el.value) =>
Array.from(p.find('.swiper')).map(i => $f7.swiper.create(i,{
observer: true,
slidesPerView: 'auto',
spaceBetween: 5,
slidesPerView: 'auto',
watchSlidesProgress: true,
lazy: {
loadPrevNext: true,
loadPrevNextAmount: 3
},
pagination: {
clickable: true,
el: p.find('.swiper-pagination')
},
navigation: {
nextEl: p.find('.swiper-button-next'),
prevEl: p.find('.swiper-button-prev'),
},
on: {
init: function (s) {
console.log('swiper init');
},
click: function (swiper, e) {
console.log('swiper click');
e.preventDefault();
},
tap: function (swiper, e) {
console.log('swiper tap');
e.preventDefault();
},
touchStart: function (swiper, e){
console.log('swiper touchStart');
e.preventDefault();
},
touchMove: function (swiper, e){
console.log('swiper touchMove');
e.preventDefault();
},
touchEnd: function (swiper, e){
console.log('swiper touchEnd');
e.preventDefault();
},
observerUpdate: function (swiper, e) {
console.log('swiper observerUpdate');
},
afterInit: (swiper) => {
console.log('swiper afterInit');
},
slideChange: () => {
console.log('swiper slideChange');
},
}
})).forEach(i => p.once('page:beforeremove',() => i.destroy()))
);
return $render;
};
</script>
<style>
.swiper-lazy{
width: 100%;
height: 245px;
border: 1px solid #cdcdcd;
background-size: cover;
border-radius:5px;
}
.swiper-slide {
width: 95%;
background-size: cover;
background-position: center;
font-weight: 300;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
color: #000;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
background-size: cover;
background-position: center;
}
.swiper-slide .text-white {
color:#fff;
font-size: 28px;
}
.swiper-slide .text-black {
color:#000;
font-size: 28px;
}
.swiper .fab-right-top {
margin-top: 0px !important;
}
.swiper .fab-left-top {
margin-top: 0px !important;
}
</style>