使用轮播特效的插件(npm中的包)
1、github上有保存,名为vue-awesome-swiper
https://github.com/surmon-china/vue-awesome-swiper
2、根据提示步骤按步进行
2.1 命令行npm中安装 npm install vue-awesome-swiper@2.6.7 --save
2.2 main.js中全局引入相关的组件和css,vue.use()使用这个插件
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper,)
2.3在用到轮播特效的单文件组件中引用插件定义的模板:components\Swiper.vue
<template>
<swiper :options="swiperOptions"> //有swiperOptions变量的绑定,需在子组件data里绑定
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</template>
<script>
export default{
name:'HomeSwiper',
data(){
return{
swiperOptions:{}//绑定父组件变量swiperOptions
}
}
}
</script>
<style lang="stylus" scoped>
</style>
2.4在Home.vue中放入HomeSwiper组件
<template>
<div>
<home-header></home-header>
<home-swiper></home-swiper>
</div>
</template>
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default{
name:'Home',
components:{
HomeHeader,
HomeSwiper
}
}
</script>
3.修改轮播图的信息和样式
<div class="wrapper">
<swiper :options="swiperOptions">
<swiper-slide>
<img class="swiper-img" src="https://img.zcool.cn/community/016d6560af0e1311013eaf705fcddf.jpg@1380w">
</swiper-slide>
<swiper-slide>
<img class="swiper-img" src="https://img.zcool.cn/community/01486f60b04f5611013eaf70f5ed8a.jpg@1380w">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<style scoped>
.wrapper//防止加载图片过程中的内容抖动
overflow hidden
width:100%
height:0
padding-bottom:25.3%%//图片高:宽比例
background:#eee
.swiper-img
width:100%
</style>