yuanqu_ui/work/components/yuyue/hysbanner.vue

<template>
	<view class="hometop">
		<swiper class="swiper" circular :indicator-active-color="activecolor" :current="currentidx" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<block v-for="(ite,idx) in bannerlist" :key='idx'>
				<swiper-item>
					<image  :src="baseUrl+ite" class="swiperimg" @click.stop="getPreviewImage(idx)"></image>
				</swiper-item>
			</block>
		</swiper>
		<block v-if="bannerlist.length>1">
			<image :src="leftimg" class="arrow arrowleft" @click.stop="prev"></image>
			<image :src="rightimg" class="arrow arrowright" @click.stop="next"></image>
		</block>
	</view>
</template>

<script>
	import config from '@/config.js';
	export default{
		props:{
			bannerlist:{
				type: Array,
				default () {
					return []
				}
			},
			type:{
				type: String,
				default () {
					return 'zhao'
				}
			},
			currentdate:{
				type: String,
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				leftimg:require('@/work/static/yuy/left.png'),
				rightimg:require('@/work/static/yuy/right.png'),
				background: ['color1', 'color2', 'color3'],
				activecolor:'#ffffff',
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				baseUrl:config.baseUrl,
				currentidx:0,
			}
		},
		methods:{
			getPreviewImage(idx){
				var newArr=[];
				var arr=this.bannerlist
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {
						
					},
					fail: function(err) {
						
					}
				});
			},
			prev(){
				var len=this.bannerlist.length
				this.currentidx=(this.currentidx-1+len)%len
			},
			next(){
				var len=this.bannerlist.length
				this.currentidx=(this.currentidx+1)%len
			}
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	.hometop{position: relative;}
	.arrow{width: 30rpx;height: 30rpx;position: absolute;top: 50%;transform: translateY(-50%);
		&.arrowleft{left: 26rpx;}
		&.arrowright{right: 26rpx;}
	}
	// height: 246rpx;
	.swiper{height: 322rpx;position: relative;border-radius: 10rpx;overflow: hidden;
		.swiperimg{width: 100%;height: 100%;border-radius: 10rpx;overflow: hidden;}
	}
	.swiper /deep/ .uni-swiper-wrapper .uni-swiper-dot{
		width:12rpx;height:12rpx;border-radius: 50%;background: rgba(0, 0, 0, 0.5);
		}
	.swiper /deep/ .uni-swiper-wrapper .uni-swiper-dot-active{
		width: 20rpx;height: 12rpx;border-radius: 6rpx;background-color: #ffffff;
	}
	// wx
	.swiper /deep/ .wx-swiper-wrapper .wx-swiper-dot{
		width:12rpx;height:12rpx;border-radius: 50%;background: rgba(0, 0, 0, 0.5);
		}
	.swiper /deep/ .wx-swiper-wrapper .wx-swiper-dot-active{
		width: 20rpx;height: 12rpx;border-radius: 6rpx;background-color: #ffffff;
	}
	.bannerfot{position: absolute;left: 0;right: 0;height: 70rpx;background-color: rgba(0, 0, 0, 0.5);padding: 0 32rpx;bottom: 0;display: flex;align-items: center;justify-content: space-between;}
</style>