CBB3/components/ui-swiper/ui-swiper.vue

<style>
	.swiper-img .bg{ width: 100%;}
	.slide-indicator{position:absolute;bottom:90rpx;left:0px;width:100%}
	.slide-indicator-item{width:20rpx;height:2rpx;background:rgba(255,255,255,0.4);margin:0 10rpx}
	.slide-indicator-item.select{background:white}  
</style>
<template>
	<view>
		<view id="swiper" class="swiper">
			<swiper class="swiper-img" :style="height > 0 ? ('height:' + height + 'px') : '' " :indicator-dots="indicator" autoplay="true" @change="tapChange">
				<swiper-item @tap="tapItem(index)"  v-for="(item,index) in swData">
					<image mode="widthFix" class="bg" :src="item.img"/>
				</swiper-item>
			</swiper>
		</view>
	</view>
	
</template>

<script>
	var swH = 0;
	export default {
		name: 'ui-swiper',
		props:{
			swData : {
				type: Array,
				default: []
			},
			indicator:{
				type:Boolean,
				default : false
			}
			
		},
		data() {
			return{ 
				imgsAr : [],
				index : 0,
				width : 0,
				height:0
			}
		},
		watch: {
			swData() {
				this.initView();
			}
		},
		created() { 
			this.initView();
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select("#swiper").boundingClientRect(res=>{
					console.log("xxxxx");
					this.width = res.width;
					if(this.swData.length > 0) this.initImg(this.index);
				}).exec();
			})
			
			
		},
		mounted() {
			//this.width = ;
		},
		methods: {
			
			tapItem:function(index){
				this.$emit('tapItem',index);
			},
			tapChange:function(ev){
				this.index = ev.detail.current;
				if(this.imgsAr[this.index] != null) {
					this.setHeight(this.imgsAr[this.index].height);
				}
			},
			/**
			 * 初始化
			 */
			initView:function(){
				this.imgsAr = [];
			
				for(var i in this.swData) {
					this.imgsAr[i] = null;
					this.initImg(i);
				}
				if(swH > 0) {
					this.height = swH;
				}
			},
			/**
			 * 初始化
			 * @param {Object} i
			 */
			initImg:function(i) {
				
				uni.getImageInfo({
					src:this.swData[i].img,
					success:(img) => {
						var width = 0;
						var height = 0;
						if(img.width > this.width) {
							width = this.width;
						} else {
							width = img.width;
						}
					
						//"width": 1500,
						//"height": 972,
						height = (img.height / img.width) * width;
						this.imgsAr[i] = { width:width, height:height, img:this.swData[i]};
						console.log(this.imgsAr[i]);
						if(this.index == i) {
							this.setHeight(height);
						}
					}
				});	
			},
			setHeight:function (height)
			{
				this.height = height;
				swH = height;
				this.$emit('onHeight',{height:height,index:this.index});
			}
		}
	}
</script>