xxdj1/components/banner.vue

<template>
	<!-- 轮播图广告 -->
	<view class='swiper-box' :style='{margin:`0 ${margin}rpx`}'>
		<swiper class="swiper-ad" :indicator-dots="false" :autoplay="autoplay" :indicator-color="indicatorColor"
			:indicator-active-color="indicatorActiveColor" :circular="circular" :current="activeIndex"
			:previous-margin="list.length>1?previousMargin:0" :next-margin="list.length>1?nextMargin:0"
			@change="handerChange" :style="{height:height+'rpx'}" easing-function="linear">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class='img-box' @tap='changeItem(item)'>
					<image mode="aspectFill" :src='item.img || item' class="swiper-ad__img"
						:style="{borderRadius:borderRadius+'rpx'}" />
				</view>
			</swiper-item>
		</swiper>
		<view class='numbers' v-if="list.length>1&&indicatorType=='number'" :style="{textAlign:indicatorStyle}">
			<view class="number">{{activeIndex+1}}/{{list.length}}</view>
		</view>
		<view class='dots' v-if="list.length>1&&indicatorType=='dot'"
			:style="{textAlign:indicatorStyle,bottom:`${dotBottom}rpx`}">
			<view class='dot' v-for="(item,index) in list" :key="index"
				:style='{backgroundColor:index==activeIndex?indicatorActiveColor:indicatorColor,width:index==activeIndex? `${dotWidth}rpx` :"12rpx"}'>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		name: 'banner',
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			},
			height: {
				type: Number,
				default () {
					return 400
				}
			},
			indicatorType: {
				type: String,
				default () {
					return ""
				}
			},
			indicatorColor: {
				type: String,
				default () {
					return "#FEFFFE"
				}
			},
			indicatorActiveColor: {
				type: String,
				default () {
					return "#fff"
				}
			},
			indicatorStyle: {
				type: String,
				default () {
					return 'center'
				}
			},
			circular: {
				type: Boolean,
				default () {
					return true
				}
			},
			autoplay: {
				type: Boolean,
				default () {
					return false
				}
			},
			previousMargin: {
				type: Number,
				// default () {
				// 	return 0
				// }
			},
			nextMargin: {
				type: Number,
				// default () {
				// 	return 0
				// }
			},
			dotWidth: {
				type: Number,
				default () {
					return 12
				}
			},
			dotBottom: {
				type: Number,
				default () {
					return 20
				}
			},
			margin: {
				type: Number,
				default () {
					return 0
				}
			},
			borderRadius: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		created() {

		},
		data() {
			return {
				activeIndex: 0
			}
		},
		watch: {
			list(newlist, oldlist) {
				if (newlist.length != oldlist.length) {
					this.activeIndex = 0
				}
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			commonOptions: state => state.user.commonOptions,
		}),
		methods: {
			handerChange: function(e) {
				this.activeIndex = e.detail.current;
			},
			changeItem(item) {
				this.$emit("change", item)
			}
		}
	}
</script>

<style lang="scss">
	.swiper-box {
		position: relative;

		.img-box {
			width: 100%;
			height: 100%;

			.swiper-ad__img {
				width: 100%;
				height: 100%;
				background: #fff;
			}
		}

		.dots {
			position: absolute;
			z-index: 20rpx;
			text-align: right;
			width: 100%;
			padding: 0 20rpx;

			.dot {
				display: inline-block;
				height: 12rpx;
				width: 12rpx;
				background-color: #FEFFFE;
				border-radius: 6rpx;
				margin: 0 8rpx;

			}
		}


		.numbers {
			position: absolute;
			z-index: 20rpx;
			text-align: right;
			width: 100%;
			transform: translateY(-80rpx);
			padding: 0 20rpx;

			.number {
				display: inline-block;
				width: 90rpx;
				line-height: 50rpx;
				background: rgba(0, 0, 0, 0.3);
				text-align: center;
				color: #fff;
				border-radius: 45rpx;
			}
		}
	}
</style>