ftui3 swiper Code-Problem

[Marko1976]

Hallo, ich habe ein Problem mit dem ftui3-Swipe Element.

Wie man auf dem Screenshot sieht möchte ich als Unterseite mit dem swipe zwischen verschiedenen Detailseiten hin und her wechseln können.
Das interessante ist, benutze ich die Vor-/Zurück-Buttons außen funktioniert es solange bis ich einen der anderen Buttons benutze. Die Testanzeige der ID für den Swiper (ganz oben zentriert) wird auch erst dann angezeigt, egal wie oft ich vor oder zurückblättere. Auch beim automatischen Blättern ändert sich der Wert nicht.

Ich kann also derzeit entweder oder aber nicht beide Möglichkeiten nutzen.

Hier ist der betreffende Code-Ausschnitt aus dem HTML:

Code Auswählen Erweitern

<ftui-tab-view id="Settings_Allgemein" group="3">

<!-- ---------- Swiper ---------- -->
<ftui-grid-tile class="swipe" row="1" col="2.125" height="18.6" width="14">
<ftui-label [text]="local:swiper_settings_allgemein" size="5" class="Kontrollrahmen_red" color="white"></ftui-label>
<ftui-swiper width="100%" id="swiper_settings_allgemein" auto-play="true" interval="3" (value)="swiper_settings_allgemein_1" ([value])="local:swiper_settings_allgemein">

<!-- -------------------- Kachel #1 -------------------- -->
<ftui-content id="swiper_settings_allgemein_1" file="./content/settings/Allgemein_Content_page1.html" [hidden]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_1:false, .*:true')"></ftui-content>

<!-- -------------------- Kachel #1 -------------------- -->
<ftui-content id="swiper_settings_allgemein_2" file="./content/settings/Allgemein_Content_page2.html" [hidden]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_2:false, .*:true')"></ftui-content>

<!-- -------------------- Kachel #3 -------------------- -->
<ftui-content id="swiper_settings_allgemein_3" file="./content/settings/Allgemein_Content_page3.html" [hidden]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_3:false, .*:true')"></ftui-content>

<!-- -------------------- Kachel #4 -------------------- -->
<ftui-content id="swiper_settings_allgemein_4" file="./content/settings/Allgemein_Content_page4.html" [hidden]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_4:false, .*:true')"></ftui-content>

</ftui-swiper>
<!-- <ftui-content file="./content/settings/Allgemein.html"></ftui-content> -->
</ftui-grid-tile>

<!-- Auswahlbereich -->
<ftui-grid-tile class="swipe_select" row="19.5" col="2" height="1.5" width="14">
<ftui-row margin="0" align-items="around">
<ftui-icon name="arrow_left" class="size-6" margin="-0.25" @click="local:swiper_settings_allgemein.back()"></ftui-icon>
<ftui-button height="100%" Width="150px" (value)="local:swiper_settings_allgemein" states="swiper_settings_allgemein_1" [fill]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_1:solid, .*:outline')" [color]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_1:blue, .*:light')" class="size-2" margin="0px 0px 0px 0px">Marko</ftui-button>
<ftui-button height="100%" Width="150px" (value)="local:swiper_settings_allgemein" states="swiper_settings_allgemein_2" [fill]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_2:solid, .*:outline')" [color]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_2:blue, .*:light')" class="size-2" margin="0px 0px 0px 0px">Marion</ftui-button>
<ftui-button height="100%" Width="150px" (value)="local:swiper_settings_allgemein" states="swiper_settings_allgemein_3" [fill]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_3:solid, .*:outline')" [color]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_3:blue, .*:light')" class="size-2" margin="0px 0px 0px 0px">Aufgaben</ftui-button>
<!-- <ftui-button height="100%" Width="150px" (value)="local:swiper_settings_allgemein" states="swiper_settings_allgemein_4" [fill]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_4:solid, .*:outline')" [color]="local:swiper_settings_allgemein | map('swiper_settings_allgemein_4:blue, .*:light')" class="size-2" margin="0px 0px 0px 0px">Marion</ftui-button> -->
<ftui-icon name="arrow_right" class="size-6" margin="-0.25" @click="local:swiper_settings_allgemein.next()"></ftui-icon>
</ftui-row>
</ftui-grid-tile>

</ftui-tab-view>

Könnte sich mal jemand den Code ansehen und mir den Denkfehler erklären?

Ich setze beim Aufrufen der Unterseite den Wert der ID und schreibe ihn anschließend in die locale Varibale. Die Pfile (back/next) setzen automatisch die vorherige/nächste Swipeseite aber offenbar ohne den Inhalt der lokalen Variable zu ändern. Die Buttons in der Mitte setzen hingegen die lokale Variable explezit auf einen fixen Wert. Dieser kann aber offenbar nicht für Vor/Zurück genutzt werden. Irgendwie verstehe ich die Logik nicht.

[BigGB]

Hi Marko1976,
Screenshot fehlt.
VG Gerald

[Marko1976]

Sorry, in der Eile macht man schnell mal Fehler.
Du darfst diesen Dateianhang nicht ansehen.

[Marko1976]

Keiner eine Idee?

Wo genau steht denn drin welche Seite im Swipe gerade angezeigt wird?
Jedenfalls nicht in der lokalen Variable "local:swiper_settings_allgemein".

[juemuc]

Hallo Marko,

in meiner Doku steht, dass "swiper" bei manchen Browsern Probleme bereitet, die ich wie folgt korrigiere (Zeile 90):

Code Auswählen Erweitern

Habe zum Verhalten im swiper was rausgefunden...
Wenn man diese Zeile vom swiper:
https://github.com/knowthelist/ftui/blob/master/www/ftui/components/swiper/swiper.component.js#L90
mit dieser ersetzt:
this.submitChange('value', this.value);

Vielleicht hilft es.

Viele Grüße
Jürgen

[Marko1976]

Was genau soll diese Änderung denn bewirken?
Worauf soll ich achten?