美文网首页
vue-awesome-swiper轮播图

vue-awesome-swiper轮播图

作者: 金桔柠檬加冰 | 来源:发表于2019-07-10 11:36 被阅读0次

使用

引入

1、npm install vue-awesome-swiper --save
2、在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css' (css不显示的问题可能在这)
3、组件里面引入

import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  }
}
<template>
  <div class="swiper">
    <swiper :options='swiperOption' ref='mySwiper' class="swiper">
      <swiper-slide v-for='(item, index) in banners' :key='index' class="swiper_item">
        <img :src="item.src" alt="轮播图" class="pic">
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
import { getSwiperList } from '@/api/home.js'
export default {
  data () {
    return {
      swiperOption: {
        // loop: true,
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        }
      },
      banners: []
    }
  },
  created () {
    // 获取轮播图的图片
    getSwiperList().then(res => {
      if (res.data.code === 200) {
        this.banners = res.data.bannersList
      }
    })
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper
    }
  }
}
</script>
<style lang='less'>
.swiper{
  /* height: 150px; */
  width: 100%;
  min-height: 1px;
  img{
    border: none;
    vertical-align: middle;
    width: 100%;
  }
}
.swiper /deep/ .swiper-pagination-bullet-active {
  background-color: #fff;
}
.swiper /deep/ .swiper-pagination-bullets {
  text-align: left;
}
</style>

相关文章

网友评论

      本文标题:vue-awesome-swiper轮播图

      本文链接:https://www.haomeiwen.com/subject/gljckctx.html