使用nuxt
实现轮播图功能适用得是vue-awesome-swiper
这个插件
按照官网进行配置
不是报错就是样式有问题
总结了一下能正常使用的步骤
- 安装插件
// 使用3.1.3版本可以不用引入swiper插件
npm i vue-awesome-swiper@3.1.3 --save
- 在plugins里创建
vue-swiper.js
import Vue from 'vue'
if (process.browser) {
const VueAwesomeSwiper = require("vue-awesome-swiper/dist/ssr");
Vue.use(VueAwesomeSwiper);
}
- 在
nuxt.config.js
中引入vue-swiper.js
以及插件自带的css样式
import env from './env' // 环境配置文件
export default {
···
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
···
'swiper/dist/css/swiper.css',
],
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
···
'~/plugins/vue-swiper.js'
],
···
}
- 我这里使用的是
ssr
用法-官网例子
<template>
<div v-swiper:mySwiper="swiperOption">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="banner in banners">
<img :src="banner">
</div>
</div>
<div class="swiper-pagination swiper-pagination-bullets"></div>
</div>
</template>
<script>
export default {
data () {
return {
banners: [ '/1.jpg', '/2.jpg', '/3.jpg' ],
swiperOption: {
autoplay: 5000,
initialSlide: 1,
loop: true,
pagination: '.swiper-pagination',
onSlideChangeEnd: swiper => {
console.log('onSlideChangeEnd', swiper.realIndex)
}
}
}
},
mounted() {
console.log('app init')
setTimeout(() => {
this.banners.push('/5.jpg')
console.log('banners update')
}, 3000)
console.log(
'This is current swiper instance object', this.mySwiper,
'It will slideTo banners 3')
this.mySwiper.slideTo(3)
}
}
</script>
- github地址
github地址