cgst/components/bw-swiper/bw-swiper.vue

<template>
	<view class="swiperContent">
		<swiper
			@change="change"
			@animationfinish="animationfinish"
			:current="current"
			:interval="interval"
			:duration="duration"
			:circular="circular"
			:vertical="vertical"
			:previous-margin="previousMargin"
			:next-margin="nextMargin"
			:autoplay="(autoplay && flag)"
			:style="{'height':swiperHeight+'px'}"
			:class="(swiperType && displayMultipleItems ==1 && !vertical && !fullScreen)?'cardSwiper':'' "
			class="screen-swiper"
		>
			<swiper-item class="swiper-item"  v-for="(item,index) in swiperList" :key="index" :class="(cardCur==index && displayMultipleItems ==1 && !vertical &&  !fullScreen)?'cur':''">
				<view class="swiper-box" v-if="item[imageKey] && !item[videoKey]">
					<image :src="item[imageKey]"></image>
					<view class="swiperText">
						<view class="swiperText_name">{{item.name}}</view>
						<view>可享受商品折扣: {{item.discount}}%</view>
						<view class="flex disdiscount_box" v-if="item.is_clear == false && item.task_list.length > 1">
							<view class="" v-for="ls in item.task_list">
								<view class="task_name">{{ls.number}}</view>
								<view v-if="">{{ls.real_name}}</view>
							</view>
						</view>
						<view class="disdiscount_box" v-if="item.is_clear == false && item.task_list.length == 1">
							<view class="" v-for="ls in item.task_list">
								<view class="task_name">{{ls.number}}</view>
								<view v-if="">{{ls.name}}</view>
							</view>
						</view>
						<view class="is_clear" v-if="item.is_clear == true">该会员等级尚未解锁</view>
					</view>
				</view>
				<view v-if="item[videoKey]">
				<video :src="item[videoKey]" @play="play" @pause="pause" :style="{'height':swiperHeight+'px'}" autoplay loop muted :autoplay="videoAutoplay" objectFit="cover"></video>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item"  v-if="swiperList.length==0" >
				<text></text>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:'bw-swiper',
		created:function(){
			var that = this;
			if(this.fullScreen){
				uni.getSystemInfo({
					success:function(e){
					that.swiperHeight = e.screenHeight -44
				}})
			}
		},
		mounted:function(){
			if(!this.fullScreen){
				const query = uni.createSelectorQuery().in(this);
				query.select('.swiper-item').boundingClientRect(data => {
					this.swiperHeight = data.width/this.w_h;
				}).exec();
			}	
		},
		props: {
			fullScreen:{ // 是否全屏
				type:Boolean,
				default:false
			},
			swiperList:{ // 滑块视图容器数据
				type:Array,
				required: true,
				default:function(){
					  return []
				}
			},
			swiperType:{  // false => 全屏限高轮播图 true => 卡塔式轮播图
				type:Boolean,
				default:true
			},
			videoAutoplay:{ // true =>自动播放
				type:Boolean,
				default:false
			},
			videoKey:{  // 视频映射的键
				type:String,
				default:'src'
			},
			imageKey:{ //  图片映射的键
				type:String,
				default:'image'
			},
			textKey:{ //   文字说明映射的键
				type:String,
				default:'name'
			},
			displayMultipleItems:{ //同时显示的滑块数量
				type:Number,
				default:1
			},
			textTip:{ // 图片文字说明 false => 隐藏
				type:Boolean,
				default:true
			},
			textStyleSize:{ // 图片文字大小
				type:Number,
				default:45
			},
			textStyleTop:{ // 图片文字位置
				type:Number,
				default:2
			},
			textStyleLeft:{ // 图片文字位置
				type:Number,
				default:5
			},
			textStyleColor:{ // 图片文字颜色
				type:String,
				default:'#ffffff'
			},
			textStyleBgcolor:{ // 图片文字背景色
				type:String,
				default:'transparent'
			},
			w_h:{  //宽高比 推荐 w/h => 2
				type:Number,
				default:2
			},
			nextMargin:{ // 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值 头条小程序不支持
				type:String,
				default:'0px'
			},
			previousMargin:{//前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值头条小程序不支持
				type:String,
				default:'0px'
			},
			vertical:{ //滑动方向是否为纵向 卡牌  不支持纵向以及同时显示的2块以上滑块数量
				type:Boolean,
				default:false
			},
			circular:{ // 是否采用衔接滑动
				type:Boolean,
				default:true
			},
			duration:{ // 滑动动画时长
				type:Number,
				default:400
			},
			interval:{ // 自动切换时间间隔
				type:Number,
				default:2500
			},
			current:{ // 当前所在滑块的 index
				type:Number,
				default:0
			},
			autoplay:{ // 是否自动切换
				type:Boolean,
				default:false
			},
			indicatorDots: { // 是否显示面板指示点
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				flag:true,
				cardCur:0,
				swiperHeight:300
			}
		},
		computed:{
			
		},
		methods: {
			play:function(){
				this.flag = false
			},
			pause:function(){
				this.flag = true
			},
			// clickItem:function(index){
			// 	console.log(index,"66")
			// 	if(this.swiperList.length>0){
			// 		this.$emit('clickItem',this.swiperList[index])
			// 		console.log(this.swiperList[index],55)
			// 	}
			// },
			change:function(e){
				this.$emit('change',e.detail.current)
				// console.log(e.detail.current,55)
			},
			animationfinish:function(e){
				this.cardCur = e.detail.current;
				this.$emit('animationfinish',e)
			}
		}
	}
</script>

<style lang="scss">
.swiperContent{
		background-color: #232323;
}
.cardSwiper .swiper-item{
	.swiper-box{
		display: block;
		transform: scale(0.93,0.8);
		opacity: 0.7;
		transition: all 0.1s ease-in 0s;
		overflow: hidden;
		box-sizing: border-box;
		height:100%;
		position: relative;
		width:86%!important;
		overflow: initial;
		padding: 25rpx 0rpx;
		margin-left: 8%;
		transform:  initial;
		opacity: 1;
		transition: all 0.1s ease-in 0s;
		image{
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}
}
.swiperText{
	width: 100%;
	height: 100%;
	position: absolute;
	color:#ffffff;
	z-index:2;
	padding: 45rpx 25rpx;
	top:0;
	color: rgb(255, 255, 255);
	font-size: 28rpx;
	.swiperText_name{
		font-size: 45rpx;
		font-weight: bold;
		padding-bottom: 10rpx;
		}
		.disdiscount_box{
			padding: 45rpx 45rpx;
			text-align: center;
		}
}
.task_name{
	font-size: 45rpx;
}
.is_clear{
	padding-top: 65rpx;
}
.swiperContent{
	width:100%;
}
</style>