<template>
<div>
<div class="banner-box">
<swiper :options="swiper.swiperOption">
<swiper-slide v-for="(item,index) in pics" :key="index">
<img :src="item.picture">
</swiper-slide>
<div v-show="pics.length>1" class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<!-- <div :class="picStyle">
<img :src="nowpic" :class="picSize">
<div class="circle" v-show="type==='轮播图'">
<div
class="circle-one"
:style="circleStyle"
ref="circle"
v-for="(num,index) in num"
@click="Selectpic(index,this)"
:key="index"
></div>`
</div>
</div>-->
</div>
</template>
<script>
// E:\2dfire\isv-theme\retail\src\modules\shopinfo\views\BtnLike.vue
export default {
name: 'PictureAds',
props: {
config: {
type: Object,
default: () => {},
required: true,
},
index: {
type: Number,
required: true,
},
},
data() {
return {
swiper: {
swiperOption: {
// 是一个组件自有属性,如果notNextTick设置为true,
// 组件则不会通过NextTick来实例化swiper,也就意味着你可以在第一时间获取到swiper对象,
// 假如你需要刚加载遍使用获取swiper对象来做什么事,那么这个属性一定要是true
notNextTick: true,
direction: 'horizontal',
pagination: {
el: '.swiper-pagination',
},
},
},
// circleStyle: {
// backgroundColor: '#b4ddff',
// },
type: this.config.mode,
pics: this.config.items,
}
},
created() {
this.piccount = setInterval(this.picchange, 1000)
console.log(this.pics)
this.$nextTick(() => {
this.$refs.circle[0].style.backgroundColor = '#48ACFF'
})
},
methods: {
picchange(obj) {
if (this.type === '轮播图') {
if (this.i === this.num - 1) {
this.i = -1
}
this.i=this.i+1
this.initpic = this.pics[this.i].picture
for (this.j = 0; this.j < this.num; this.j++) {
this.$refs.circle[this.j].style.backgroundColor = '#B4DDFF'
}
this.$refs.circle[this.i].style.backgroundColor = '#48ACFF'
}
},
Selectpic(obj, obj2) {
clearInterval(this.piccount)
this.i = obj
this.piccount = setInterval(this.picchange, 1000)
this.initpic = this.pics[obj].picture
this.i = obj
for (this.j = 0; this.j < this.num; this.j++) {
this.$refs.circle[this.j].style.backgroundColor = '#B4DDFF'
}
this.$refs.circle[obj].style.backgroundColor = '#48ACFF'
},
},
computed: {
picStyle() {
if (this.type === '单图') {
return 'one-pic'
} else if (this.type === '轮播图') {
return 'rotation-chart'
} else if (this.type === '横向滑动') {
return 'cross-slipt'
} else {
return ''
}
},
nowpic() {
return this.initpic
},
controli() {
return this.i
},
</script>
<style lang="scss" src="./PictureAds.scss" scoped>
</style>