脚本宝典收集整理的这篇文章主要介绍了vue-awesome-swiper页面渲染轮播无效的问题，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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等等……看项目的需要。

脚本宝典总结

以上是脚本宝典为你收集整理的vue-awesome-swiper页面渲染轮播无效的问题全部内容，希望文章能够帮你解决vue-awesome-swiper页面渲染轮播无效的问题所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。