参考： https://blog.csdn.net/dwb123456123456/article/details/82701740
https://blog.csdn.net/u014027876/article/details/81663080
https://www.jianshu.com/p/8601ccf91225
- 安装
npm install vue-awesome-swiper
cnpm inatall vue-awesome-swiper
- main.js中引入
import vueSwiper from 'vue-awesome-swiper'
- component - ShopSlide.vue 中引入
import { swiper, swiperSlider } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
components: {
swiper,
swiperSlider
}
- ShopSlide.vue代码
<template>
<swiper :options="swiperOption" ref="mySwiper" v-bind:class="ifSlide?'':'swiper-no-swiping'">
<!-- slides -->
<swiper-slide v-for="(picitem,index) in shopImgsList" :key="index">
<img :src="picitem.imgpath" alt="" style="display:inline-block;width:100%;vertical-align:middle;">
</swiper-slide>
<div class="swiper-scrollbar" slot="scrollbar"></div>
<div class="swiper-button-prev" slot="button-prev"></div>
<div class="swiper-button-next" slot="button-next"></div>
<div class="swiper-pagination pageIcon" slot="pagination"></div>
</swiper>
</template>
<script>
import { swiper, swiperSlider } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
name: 'ShopSlide',
data() {
return {
swiperOption: {
notNextTick: true,
loop: true,
autoplay: 3000,
speed: 800,
direction: 'horizontal',
grabCursor: true,
setWrapperSize: true,
autoHeight: true,
autoplayDisableOnInteraction: false,
// 如果需要分页符
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar',
paginationClickable: true,
mousewheelControl: true,
observeParents: true,
debugger: true
},
ImgsList: [],
ifSlide: true
}
},
props: {
shopImgsList: {
type: Array,
required: true
}
},
components: {
swiper,
swiperSlider
},
watch: {
shopImgsList: function(newVal, oldVal) {
this.ImgsList = newVal;
if(this.ImgsList.length == 1) {
this.swiperOption.autoplay = false;
this.ifSlide = false;
}
}
}
}
</script>
<style>
.swiper-wrapper {
font-size: 0;
}
.swiper-pagination.pageIcon {
width: 3.75rem;
height: .2rem;
position: absolute;
bottom: .1rem !important;
text-align: center;
line-height: .2rem;
box-sizing: border-box;
padding: 0 .3rem;
font-size: 0;
}
.pageIcon span {
background: rgba(0, 0, 0, .2);
}
.swiper-pagination-bullet-active {
background-color: #ff7035 !important;
opacity: 1;
}
.swiper-button-next {
background-color:
}
.swiper-slide {
width: 100%;
height: 100% !important;
line-height: 3.75rem !important;
}
.swiper-wrapper {
height: 100% !important;
line-height: 3.75rem !important;
background-color: #fff;
}
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
- 其他组件内引用ShopSlide.vue
<template>
<div class="shopImg">
<shop-slide :shopImgsList="shopImgsList"></shop-slide>
</div>
</template>
<script>
import ShopSlide from './ShopSlide.vue'
export default{
data( ) {
return{
shopImgList : [ { imgpath: '1.jpg '} , { imgpath: '2.jpg '}]
}
},
components: {
ShopSlide
}
}
<script>
- 样式穿透
<style scoped>
.shopImg >>> .swiper-pagination-bullet-active{
background:#fff
}
</style>
或
<style lang="stylus" scoped> //stylus是一种css预编译语言,支持省略花括号，支持省略分号，代码整洁，支持引入，并且支持语法内函数
.shopImg >>> .swiper-pagination-bullet-active background:#fff
</style>
网友评论