prevent_drowning_app/components/swiper/banner.vue

<template>
  <view>
	  <!-- 轮播图 circular-->
	  <block v-if="list&&list.length>1">
		  <swiper :style="'height:'+height+'rpx;'"  class="swiper" circular :indicator-color="incolorh" :indicator-active-color="activecolorh" :indicator-dots="indicatorDotsh" :autoplay="autoplayh">
		  	<swiper-item v-for="(ite,idx) in list" :key="idx">
		  		<image :src="baseUrl+ite" class="bannerimg"></image>
		  	</swiper-item>
		  </swiper>
	  </block>
	  <view class="swiper" :style="'height:'+height+'rpx;'" v-else>
		  <image :src="baseUrl+list[0]" class="bannerimg"></image>
	  </view>
  </view>
</template>

<script>
	import config from '@/config'
  export default {
	props:{
		list:{
			type: Array,
			default () {
				return []
			}			  
		},
		height:{
			type: [String,Number],
			default () {
				return '342'
			}
		}
	},
	data(){
		return{
			banner:require('@/static/images/home/banner.png'),
			autoplayh:false,
			incolorh:'#E6E6E6',
			activecolorh:'#A7A7A7',
			indicatorDotsh: true,
			baseUrl:config.baseUrl,
		}
	},
    onLoad: function() {
		
    },
	methods:{
		
	}
  }
</script>
<style lang="scss" scoped>
.swiper{
	width: 100%;border-radius: 10rpx;overflow: hidden;
	image{width: 100%;height: 100%;}
}
.swiper /deep/ .uni-swiper-dot{width: 10rpx;height: 10rpx;}
// .swiper /deep/ .uni-swiper-dot-active{width: 24rpx;height: 10rpx;}
</style>