0

I ran into a problem using swiper for navigation that swiped left and right. Here is the code to use swiper on the page.

<swiper class="swiper" ref="mySwiper" :options="swiperOption">
          <swiper-slide :class="{'cur':index==4,'swiper-slide-active':index==4}" v-for="(item,index) in secondNav" :key="index">
            <nuxt-link :to="item.path">
              {{item.title}}
            </nuxt-link>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev"><img :src="getImg(navImg.left)" alt=""></div>
          <div class="swiper-button-next" slot="button-next"><img :src="getImg(navImg.right)" alt=""></div>
        </swiper>

Here is the swiper configuration

swiperOption: {
        slidesPerView: 'auto', //Set the number of slides that the slider can display simultaneously
        slidesPerGroup: 1, //Defines the number of slides as a group
        slidesPerGroupAuto: true, //Automatic grouping
        speed: 500, //sliding speed
        spaceBetween: 0, //Distance between slides (px)
        centeredSlides: false, //When set to true, the active block is centered, not left as the default
        loopFillGroupWithBlank: false, //For groups of less than 6, the remaining slice will be filled with blanks
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
          disabledClass: 'my-button-disabled',
        },
        autoplay: true,
        allowTouchMove: true, //Allows manual drag and slide
        observer: true, //Swiper is automatically initialized when you modify its own or child elements
        observeParents: true, //Swiper is automatically initialized when the parent element of swiper is modified
        preventLinksPropagation: false, //Block the click event when dragging Swiper. This option is required if dragging is not prohibited
      }

I want to implement a navigation bar that can slide left and right on the mobile terminal, and switch the navigation link that is not displayed when clicking the left and right buttons.Switch to the page to select the corresponding navigation links, but if it is selected on the navigation, the navigation will jump to the new page from the first start, according to my view to the selected binding swiper that links the active pattern, but there is no effective, if the link at the time of initialization is outside the scope of visible on the screen,  Even jumping to the page it's on doesn't automatically appear in view, you have to swipe

Leeqi7
  • 95
  • 1
  • 10

1 Answers1

0

I found a solution to the problem of browser and server rendering different DOM structures by using < no-ssr > to make components not render in server rendering.If the Nuxt version is smaller than v2.9.0, use < no-SSR > if the VERSION is greater than, v2.9.0, use <client-only>. The no-SSR document on the official website is not available.

kissu
  • 40,416
  • 14
  • 65
  • 133
Leeqi7
  • 95
  • 1
  • 10