在码云中新建一个index-swiper分支,接下来的开发都会在这个分支上
在项目中运行git pull将这个线上的分支拉到本地来
git pull
切换到index-swiper分支
git checkout index-swiper
查看一下本地的状态确认是否正确
git status
然后在次分支上执行npm run dev
接下来我们开始制作轮播图了,需要用到轮播插件Vue-Awesome-Swiper,参考https://github.com/surmon-china/vue-awesome-swiper
在项目中执行代码
npm install vue-awesome-swiper@2.6.7 --save
在main.js中引入Vue-Awesome-Swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
使用这个插件
Vue.use(VueAwesomeSwiper)
接下来在components文件夹下新建一个Swiper组件,写入代码,在swiper中绑定了:options="swiperOption",所以我们也要在data中添加swiperOption对象
<template>
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div class="swiper-pagination" slot="pagination"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
</swiper>
</template>
<script>
export default {
name: 'HomeSwiper',
data: function () {
return {
swiperOption: {}
}
}
}
</script>
<style scoped>
</style>
轮播中不需要左右箭头和灰色滚动条,所以把这三行代码删掉
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-scrollbar" slot="scrollbar"></div>
同样,要使用这个组件,需要在Home组件中导入这个组件
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
export default {
name: 'Home',
components: {
HomeHeader,
HomeSwiper
}
}
</script>
我们可以在swiper-slide标签内使用图片
解决在页面显示时,图片显示之前,图片下面的文字会先显示,而覆盖图片区域的问题,使用padding-bottom撑开高度
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide class="swiper-img">I'm Slide 1</swiper-slide>
<swiper-slide class="swiper-img">I'm Slide 2</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
data: function () {
return {
swiperOption: {}
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 31.25% //高度相对于宽度会自动撑开31.25%
background-color: #eee //图片加载完成前使背景显示浅灰色
.swiper-img
width: 100%
</style>
也可以用height: 31.25vw,但会有兼容性问题,尽量使用第一种方法
<style lang="stylus" scoped>
.wrapper
height: 31.25vw //31.25%的viewport大小
.swiper-img
width: 100%
</style>
接下来设置图片位置的小圆点,即图片的页码标注,在Swiper组件data的swiperOption对象中写入pagination: '.swiper-pagination'
来显示图片页码标注
<script>
export default {
name: 'HomeSwiper',
data: function () {
return {
swiperOption: {
pagination: '.swiper-pagination'
}
}
}
}
</script>
还要修改图片页码标注的颜色,修改Swiper组件中的style
>>>表示样式穿透,让wrapper类下的所有出现swiper-pagination-bullet-active类的元素中的样式突破scoped的限制
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background-color: #fff
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 26.67% //高度相对于宽度会自动撑开26.67%
background-color: #eee //图片加载完成前使背景显示浅灰色
.swiper-img
width: 100%
</style>
在swiperOption对象中使用loop: true可以使这个轮播插件循环轮播,使用atuoplay: true可以自动循环轮播
然后使用列表循环方法简化代码
<template>
<div class="wrapper">
<swiper :options="swiperOption">
<swiper-slide v-for="item of swiperList" :key="item.id">
<img :src="item.imgUrl" alt="图片" class="swiper-img">
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeSwiper',
data: function () {
return {
swiperOption: {
pagination: '.swiper-pagination',
loop: true
},
swiperList: [{
id: '0001',
'imgUrl': 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/37a42ce34dc16cd43bad17570bf6ab31.jpg_750x200_65d24bd7.jpg'
}, {
id: '0002',
'imgUrl': 'http://img1.qunarzz.com/piao/fusion/1811/31/da037478f37cf202.jpg_750x200_fe28d396.jpg'
}]
}
}
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-pagination-bullet-active
background-color: #fff
.wrapper
overflow: hidden
width: 100%
height: 0
padding-bottom: 26.67% //高度相对于宽度会自动撑开26.67%
background-color: #eee //图片加载完成前使背景显示浅灰色
.swiper-img
width: 100%
</style>
最终效果图显示
将所有代码传至码云的index-swiper分支上
最后,需要将这个分支合并到master分支上
git checkout master //先切换到master分支上
git merge origin/index-swiper //将index-swiper分支合并到现在的分支上,即master分支
git push //把master分支上的内容也提交到线上