vue-awesome-swipe为我们快速构建轮播图的插件。
1、输入:github.com
2.搜索 vue-awesome-swiper
3.安装 npm install vue-awesome-swiper@2.6.7 --save
4.引入相关,相关引入查阅API文档说明
main.js文件代码:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import './assets/styles/reset.css'
import './assets/styles/border.css'
import './assets/styles/iconfont/iconfont.css'
import 'swiper/dist/css/swiper.css'
import './assets/styles/varibles.styl'
import fastClick from 'fastclick'
Vue.config.productionTip = false
fastClick.attach(document.body)
Vue.use(VueAwesomeSwiper)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
swiper.vue文件代码:
<template>
<div class="wrapper">
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img class="swiper-img" :src="item.imgUrl"/>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: "HomeSwiper",
data() {
return {
swiperOption: {
pagination: ".swiper-pagination",
loop: true
},
swiperList: [
{
id: "0001",
imgUrl:
"http://img1.qunarzz.com/piao/fusion/1809/6a/847ac7b98f10e202.jpg_750x200_f0593cb5.jpg"
},
{
id: "0002",
imgUrl:
"http://img1.qunarzz.com/piao/fusion/1808/f4/5f2289f8675f0502.jpg_750x200_ab1633c7.jpg"
},
{
id: "0003",
imgUrl:
"http://img1.qunarzz.com/piao/fusion/1809/bb/3796236479c84d02.jpg_750x200_57d68258.jpg"
}
]
};
}
};
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active { // 对样式进行穿透
background: #fff;
}
.wrapper {
width: 100%;
height: 0;
overflow: hidden;
padding-bottom: 31.25%;
}
.swiper-img {
width: 100%;
}
</style>
Home.vue文件代码:
<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>
<style>
</style>