关于vue.js:vue使用Swiper踩坑

47次阅读

共计 1360 个字符,预计需要花费 4 分钟才能阅读完成。

Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’

我的 Swiper 定义:

 <div class="nyswiper-container" ref="my_swiper">
    <div  class="mySwiperWrapper">
          <slot name="content"> </slot>
    </div>
  </div>

报错信息:

看了官网文档之后发现:

要保留默认名 class:swiper-container。

批改之后:

 <div class="swiper-container" ref="my_swiper">
    <div  class="mySwiperWrapper">
          <slot name="content"> </slot>
    </div>
  </div>

持续报错,还是什么那个错。

查看 GitHub:

他说须要个 wrapper,然而我曾经定义了 wrapper 了,只不过名字不是 swiper-wraper,
起初还是把类名改回来,我本认为只有定义了里面的 container,外面的类名能够轻易写,只有合乎层级关系就好。

最初还是改回来原来的类名:

<div class="swiper-container" ref="my_swiper">
    <div  class="swiper-wrapper">
          <slot name="content"> </slot>
    </div>
  </div>

最初不会报错了:

其实我曾经应用很屡次这个玩意了,之前是这样定义的:能够失常运行。

<div ref="school_swiper" class="swiper-container_home">
    <div class="swiper-wrapper">
      <div
        class="swiper-slide swiper_slide_home"
        v-for="(item, index) in imgList"
        :key="index"
      >
        <div>![](imgList[index])</div>
      </div>
    </div>
    <div class="swiper-pagination" style="color:#ffffff"></div>
  </div>

所以我感觉,里面的类名能够批改,然而 wrapper 类名不能够批改,因为你即便改了里面的类名,因为你通过 refs 拿到里面这个 container 了,而后初始化了 Swiper,Swiper 外部还是感觉你这样的解决是对的。里面这个 container 我感觉次要是用来初始化用的,类名无需保留,这个和我看中文的 swiper 文档写的不一样,它说要保留,可能目标就是为了让用户恪守它的规定,避免报错吧。:

new Swiper(this.$refs.school_swiper, {
        loop: true, // 循环模式选项
        width: window.innerWidth * 1,
        // 分页器
        pagination: {el: ".swiper-pagination",},
        autoplay: {
          delay: 2000,
          disableOnInteraction: false, // 用户触摸后静止敞开
        },
      }));
    },

最初订正 swiper-slide 类名也不能舍弃。。也要加上能力滑动,应用插槽时,间接在里面的组件中定义 slide 即可

正文完
 0