vue2中swiper的使用


注意,官方并没有vue2的使用文档,以下展示的是swiper直接使用,

下载5版本,Vue2对这个版本支持好

cnpm i swiper@5

```JS
<script>

import Swiper from "swiper";
import "swiper/css/swiper.min.css";

export default {
  name: "HomeView",
  data() {
    return {
      swiperShow: false,
    };
  },
  mounted() {
    this.swiperShow = true;
    console.log(this.$data);
  },
  updated() {
    new Swiper(".swiper-container", {
      direction: "horizontal", // 垂直切换选项
      grabCursor: true, //手掌
      loop: true, // 循环模式选项

      // 如果需要分页器
      pagination: {
        el: ".swiper-pagination",
      },

      // 如果需要前进后退按钮
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 如果需要滚动条
      scrollbar: {
        el: ".swiper-scrollbar",
      },
      autoplay: true,
    });
  },
};
</script>
<style scoped>
.swiper-container {
  width: 976px;
  height: 550px;
}

.swiper-pagination /deep/ .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
}
</style>

文章作者: iamfugui
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 iamfugui !
评论