Swiper in Subnavbar doesn't work on ios

1

Using Swiper in Subnavbar doesn’t work on ios any idea why?

2

Потому, что navbar в ios поднимается на уровень выше, он уходит из page.

3

so how can i make it work in ios?

4

Нужно создавать компонент вручную.

5

Remove swiper-init class from it, and init manually using app.swiper.create API

6

I did so but I encountered another problem, the swiper deosn’t really work it deosn’t scroll and just bounces back

7

This is my code:

            <div class="subnavbar no-shadow">
                <div class="subnavbar-inner">
                    <div class="swiper-container filter-swiper" key="filter-swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <a class="smart-select smart-select-init filter-select" data-open-in="popover" @change="updateFilter">
                                    <select name="interest" multiple>
                                        {{#filterOptions}}
                                        <option value="{{@index}}">{{title}}</option>
                                        {{/filterOptions}}
                                    </select>
                                    <div class="chip chip-outline ripple md">
                                        <div class="chip-label">Interessen</div>
                                    </div>
                                </a>
                            </div>
                            {{#filter}}
                            <div class="swiper-slide" key="{{@index}}">
                                <div class="chip md">
                                    <div class="chip-label">{{title}}</div>
                                    <a href="#" class="chip-delete" @click="removeFilter({{@index}})"></a>
                                </div>
                            </div>
                            {{/filter}}
                        </div>
                    </div>
                </div>
            </div>

update Filter Method:

        updateFilter: function (e) {
			var self = this;
			var app = self.$app;
            var filterSelect = app.smartSelect.get('.filter-select');
            filterSelect.on('close', function () {
                self.filterSwiper.update();
            })
            //console.log(filterSelect.getValue());
            self.filter = [];
            filterSelect.getValue().forEach(function(element) {
                self.filter.push(self.filterOptions[element]) 
            })
            self.$update();
        },

Swiper Init:

            self.filterSwiper = app.swiper.create(self.$('.filter-swiper'), {
                slidesPerView: "auto",
                spaceBetween: "10",
                centeredSlides: true,
            });

The problem I am having is, that the swiper doesn’t work it swipes just one slide and all other slides it bounces back

8

This means you init Swiper when it was hidden (maybe it is in some modal). You need to init it when it is visible, and/or call its .update() method when it becomes visible. Or just try to its enable observer and observeParents parameters

9

no matter what i do it doesn’t work

10

Create live example based on template from here How to ask a good question on forum

11

here the example with code

12 
{{#filter}}
                <div class="swiper-slide" key="{{@index}}">
                  <div class="chip md">
                    <div class="chip-label">{{title}}</div>
                    <a href="#" class="chip-delete"></a>
                  </div>
                </div>
                {{/filter}}

{{#filter}} => {{#filterOptions}}
{{/filter}} => {{/filterOptions}}

13

filterOptions can be selected by clicking on filterSelect they are not supposed to be here always

and even doing your changes, the swiper still doesn’t work

14

Ok, you have

spaceBetween: '10',

but it must be a number:

spaceBetween: 10,
15

lol simple as that :open_mouth:

any idea on how i could manage which is selected in the smart select?