钻石星辰4 2024-12-02 18:25 采纳率: 58.3%
浏览 4
已结题

vue1里怎么使用swiper2？

该项目是用 vue1 写的老项目，我想在里面使用 swiper。起初我通过 npm 安装的 swiper 11，但是使用 swiper-container 时，发现该元素获取到为 null，不能使用自定义元素。这种方法在别的 vue2 项目里是正常的。
于是我查找资料，在vue-awesome-swiper看到：

Swiper 3.x vue-awesome-swiper@2.6.7 (Vue2)

既然 swiper 3 适用于 vue2，所以我就选择用 swiper 2 试试。我下载了 Swiper2.7.6完整包，看了 12-partial-display.html，想要这种小的 slide 效果。我按照这个示例在 html 中引入样式和脚本。

<head>
  <link rel="stylesheet" href="/static/css/idangerous.swiper.css">
  <script type="text/javascript" src="//webresource1.aoyou.com/js/webapp/common/jquery.min.js?ver=100"></script>
</head>
<body>
  <div id="app"></div>
  <script src="/static/js/idangerous.swiper.min.js"></script>
</body>

在 vue 组件中使用

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div 
            class="swiper-slide"
            v-for="item in chooseList" 
            :key="item.name" 
            :style="`background-image: url(${item.banner})`"
        >
            <img :src="item.icon" alt="icon" />
            <div>
                <h3>{{item.name}}</h3>
                <p 
                    style="-webkit-box-orient: vertical;"
                >{{item.description}}</p>
            </div>
        </div>
    </div>
    <div class="pagination"></div>
</div>
</template>
<script>
  export default {
    methods: {
      //初始化 swiper 2
      initializeSwiper2(){
        var mySwiper = new Swiper('.swiper-container',{
          pagination: '.pagination',
          slidesPerView: 'auto'
        });
      },
    },
    ready(){
      this.$nextTick(this.initializeSwiper2);
    },
  }
</script>

但是效果如下。

img

可以看到 .swiper-wrapper 没有内连样式，.pagination 没有内容，布局是错的。可见 swiper 初始化没成功。哪位同学知道该怎么写吗？请指教！

  • 写回答

1条回答 默认 最新

  • 恐怖如斯恐怖如斯啊 2024-12-02 19:43
    关注

    以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

    看起来你在使用 Vue 和 Swiper 时遇到了一些问题。根据你的问题描述和代码片段，我可以提供一些建议来解决你遇到的问题。

    首先，你提到了使用了 swiper 2 和 vue-awesome-swiper，但是你在 HTML 中引入的 swiper 样式和脚本似乎是 swiper 3 的版本。请确保你使用的版本是一致的。如果你正在使用 swiper 2，请确保下载并引入正确的 swiper 样式和脚本文件。

    接下来，关于初始化 swiper 的问题，你需要确保以下几点：

    1. 确保在 DOM 元素渲染完成后再初始化 swiper。你可以使用 Vue 的生命周期钩子 mounted 来确保这一点。
    2. 确保你的 .swiper-container 和 .pagination 类的元素存在于 DOM 中，并且没有其他样式或 JavaScript 干扰它们的显示或功能。
    3. 检查你的 swiper 初始化代码，确保没有语法错误或遗漏。

    以下是一个基本的示例来展示如何在 Vue 中初始化 swiper 2：

    <template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <!-- swiper slides -->
      <div class="swiper-slide" v-for="(slide, index) in slides" :key="index">
        <!-- slide content -->
      </div>
    </div>
    <!-- Add Pagination -->
    <div class="pagination"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      slides: [ /* your slide data */ ]
    };
  },
  mounted() {
    // 初始化 swiper 实例
    var mySwiper = new Swiper('.swiper-container', {
      pagination: '.pagination', // 设置分页器
      // 其他配置项...
    });
  }
};
</script>

    确保你已经正确安装并引入了所需的依赖（例如 vue-awesome-swiper），并按照文档中的说明进行了配置。如果你使用的是 swiper 官方版本而不是 vue-awesome-swiper，请确保按照官方文档的指导进行配置。此外，检查你的项目是否存在其他可能影响 swiper 初始化的因素，如其他 JavaScript 库或样式冲突等。如果问题仍然存在，请提供更多的代码和错误信息以便进一步分析。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 12月11日
  • 已采纳回答 12月3日
  • 创建了问题 12月2日