vue-awesome-swiper页面渲染轮播无效的问题

最新推荐文章于 2024-09-06 17:02:05 发布

转载最新推荐文章于 2024-09-06 17:02:05 发布 · 910 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000017866825

文章标签：

#javascript #ui #ViewUI

本文介绍如何解决Vue-awesome-swiper插件在Vue项目中轮播无效的问题，通过添加v-if条件判断确保轮播组件正确显示。同时，提供详细的安装及使用教程，包括全局引入、组件内配置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-awesome-swiper的问题

使用vue-cli搭建的项目，在图片轮播部分采用了vue-awesome-swiper插件，没有数据时有轮播效果，接入数据渲染时，轮播无效。在网上查找一番之后，解决方法是，在最外面的swiper标签，添加v-if判断：v-if="swiperSlides.length > 1" 则可以正常滚动。代码如下：

<template>
  <swiper :options="swiperOption" class="hot_swiper" v-if="swiperSlides.length > 1" >
    <swiper-slide   v-for="(slide,index) in swiperSlides" :key="index">
      <img :src="slide" alt="pictrue">
    </swiper-slide>
  </swiper>
</template>

这里涉及到vue-awesome-swiper的使用，简单介绍一下，也方便自己以后查阅。

vue-awesome-swiper的安装

npm i vue-awesome-swiper -S    //  swiper专门针对vue出的

全局引入

import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper);

在组件中使用

① template部分：

<template>
  <swiper :options="swiperOption" class="hot_swiper" v-if="swiperSlides.length > 1" >
    <swiper-slide   v-for="(slide,index) in swiperSlides" :key="index">
      <img :src="slide" alt="pictrue">
    </swiper-slide>
  </swiper>
</template>

② script部分

import { swiper, swiperSlide } from 'vue-awesome-swiper';

export default {
  name: 'hot',
  data() {
    return {
      swiperOption: {      // swiper4的写法哟！
        autoplay: {       // 自动轮播
          delay: 3000,
          disableOnInteraction: false
        },
        slidesPerView: 5,   // 一次轮播放几张图
        spaceBetween: 30,   // 每一张图间隔的距离
        loop: true       // 无限轮播
      },
      swiperSlides: []
    }
  }
}

对于 vue-awesome-swiper 的使用暂时只有这么多，后面有进一步研究再来补充。冲鸭~

而图片轮播也可应用一些UI组件，例如Element-UI（PC端）的Carousel 走马灯，像是我最近着手的项目的banner轮播图，就用了ELement-UI的Carousel、Mint-UI（移动端）的Swiper等等……看项目的需要。