bin gerade dabei mich mit dem Thema:
f7-swiper > oh-repeater > f7-swiper-slide
auseinanderzusetzen.
Weis jemand wie man z.B. bei 50 Elementen den ersten sichtbaren Index auf 10 einstellt?
initalSlide hat leider keine Auswirkung.
Swiper-Defs:
https://v4.framework7.io/vue/swiper
https://swiperjs.com/swiper-api#parameters
Zum Testen benötigt man ein Item für die Soll-Temperatur:
Code: Alles auswählen
uid: H-Test
tags: []
props:
parameters:
- context: item
label: Soll Temperatur (number)
name: itemTempSet
required: true
type: TEXT
groupName: mainItems
parameterGroups:
- name: mainItems
label: Items
timestamp: Oct 1, 2022, 6:31:44 PM
component: f7-card
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: =Number(items[props.itemTempSet].state.split(' ')[0])
style:
font-size: 50px
- component: f7-row
slots:
default:
- component: f7-col
slots:
default:
- component: f7-swiper
config:
params:
initialSlide: =Number(items[props.itemTempSet].state.split(' ')[0])
breakpoints:
"0":
slidesPerView: 1
"120":
slidesPerView: 2
"240":
slidesPerView: 3
"600":
slidesPerView: 5
"720":
slidesPerView: 7
"1200":
slidesPerView: 9
"1440":
slidesPerView: 11
"1680":
slidesPerView: 13
"1920":
slidesPerView: 15
"2160":
slidesPerView: 17
"2400":
slidesPerView: 19
"2640":
slidesPerView: 21
"2880":
slidesPerView: 23
touchRatio: 1.5
slots:
default:
- component: oh-repeater
config:
sourceType: range
for: iT
rangeStart: 4.5
rangeStop: 30.5
rangeStep: 0.5
fragment: true
slots:
default:
- component: f7-swiper-slide
config:
style:
width: 40px
slots:
default:
- component: oh-button
config:
class:
- no-padding
- no-margin
text: =loop.iT.toString()
active: false
action: command
actionItem: =props.itemTempSet
actionCommand: =loop.iT
style:
--f7-button-border-width: "=(Number(items[props.itemTempSet].state.split(' ')[0]) === loop.iT ? '2px' : '0px')"
swiper.slideTo(index, speed, runCallbacks)
z.B. (loop.iT === 10 ? swiper.slideTo(10, 300, false))
lg
Matthias