vuerouter-10_swiper组件

1.安装
npm install vue-awesome-swiper --save
2.全局配置：

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)
3.组件内的局部配置：

import 'swiper/dist/css/swiper.css'

import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide } }
实例数据的假的或者死的：

<template>
<div class="shopcar">
shopcar
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>

</swiper>
<Nav />
</div>
</template>

<script>
import Nav from '../Nav'
export default {
name: "ShopCar",
components:{
Nav
},
data() {
return {
swiperOption:{
autoplay:true,
delay:2000
}
}
}
}
</script>

<style lang="css" scoped>
</style>

4.动态
实例：

<template>
  <swiper :options="swiperOption"> <swiper-slide v-for="(slide, index) in swiperSlides" :key="index">I'm Slide {{ slide }}</swiper-slide> <div class="swiper-pagination" slot="pagination"></div> </swiper> </template> <script>  export default {  name: 'carrousel',  data() {  return {  swiperOption: {  pagination: {  el: '.swiper-pagination'  }  },  swiperSlides: [1, 2, 3, 4, 5]  }  },  mounted() {  setInterval(() => {  console.log('simulate async data')  if (this.swiperSlides.length < 10) {  this.swiperSlides.push(this.swiperSlides.length + 1)  }  }, 3000)  }  } </script>

转载于:https://www.cnblogs.com/xiao-peng-ji/p/11405865.html