Vue2.0使用輪播外掛 VueAwesomeSwiper
阿新 • • 發佈:2019-01-02
1.第一步安裝VueAwesomeSwiper
npm install vue-awesome-swiper --save
2.第二步在main.js中引入
import 'swiper/dist/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
在這部為止就可以使用該外掛了
3. 具體配置元件配置細節
<template> <div class="bottom" id="bottom"> <!-- 滾動banner --> <div class="banner"> <swiper :options="swiperOption" class="swiper-radius"> <swiper-slide> <img @click="openwindow()" class="bottom-banner-img" src="../../../static/images/20180530lby-bottomBanner01.jpg" alt=""> </swiper-slide> <swiper-slide> <img @click="openwindow()" class="bottom-banner-img" src="../../../static/images/20180530lby-bottomBanner02.jpg" alt=""> </swiper-slide> <swiper-slide> <img @click="openwindow()" class="bottom-banner-img" src="../../../static/images/20180530lby-bottomBanner03.jpg" alt=""> </swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> <div class="jc"></div> </div> </template> <script> import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { data () { return { swiperOption: { pagination: { el: '.swiper-pagination', clickable: true }, direction: 'horizontal', paginationClickable: true, autoplayDisableOnInteraction: false, loop: true, setWrapperSize: true, slidesPerView: 1, spaceBetween: -50, centeredSlides: true, initialSlide: 1, loopAdditionalSlides: 1, autoplay: { delay: 1800 }, coverflow: { rotate: 30, stretch: 10, depth: 60, modifier: 2, slideShadows: true } } } }, methods: { openwindow () { this.$emit('setting') console.log() }, opensale () { this.$emit('onsale') console.log() } }, components: { swiper, swiperSlide } } </script> <style lang="less"> </style>