轮播图vue

<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>