目录

一、轮播图中展示图片或视频，手动切换轮播图，视频暂停播放

二、轮播图组件

一、点击按钮，切换对应轮播图 

二、轮播图中视频和图片

---

一、轮播图中展示图片或视频，手动切换轮播图，视频暂停播放

 需求：

1、轮播图自动播放

2、轮播图根据后端返回是放图片或者是视频

3、点击播放视频，手动切换轮播图后，视频暂停播放

技术：

swiper+video

<template>
	<view class="container">
		<view>
			<!-- 轮播图 -->
			<swiper indicator-dots="true" indicator-color='#fff' indicator-active-color='#0086d6' :autoplay="autoplay"
				interval="3000" duration="1500" show-center-play-btn="true" class="swiper-box" circular='true'
				@change="swiperChange">
				<swiper-item v-for="(item ,index) in Banners" :key="index">
					<view class="swiper-item" v-show="!splits(item)" wx-if="{item}">
						<image v-if="item" :src="item" mode="widthFix"></image>
					</view>
					<view class="swiper-item" v-show="splits(item)" v-if="item">
						<video :id="'myVideo'+index" :autoplay="false" :src="item" controls object-fit="cover"
							@play="play" @pause="pause" @ended="ended" auto-pause-if-navigate
							auto-pause-if-open-native></video>
					</view>
				</swiper-item>
			</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Banners: [], //轮播图
				autoplay: true, //自动切换轮播图
				videoContext: '',
			};
		},
		onLoad() {
			let that = this
			this.GetBanner()
		},
		methods: {
			swiperChange(e) {
				let {
					current,
					source
				} = e.detail
				this.videoContext = uni.createVideoContext('myVideo' + (current - 1));
				//只有手动切换时开始轮播，并且上一页视频暂停
				if (source === 'touch') {
					this.videoContext.pause(); //暂停
					this.autoplay = true
				}
			},
			// 获取数据
			GetBanner() {
				this.api.GetBanner().then(res => {
					this.Banners = res.data.Data.Banners
				})
			},
			// 处理banner返回的是是视频还是图片
			splits(url) {
				if (url.indexOf('.') != -1) {
					var ext = url.substring(url.lastIndexOf('.') + 1);
					return ['mp4', 'webm', 'mpeg4', 'ogg'].indexOf(ext) != -1
				}
			},
			// 点击开始/继续播放
			play() {
				this.autoplay = false
				// this.videoContext.requestFullScreen()
			},
			// 视频暂停
			pause() {
				this.autoplay = true
			},
			// 视频结束
			ended() {
				this.autoplay = true
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.container {
		font-size: 14px;
		background-color: #fff;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.swiper-box {
		height: 350rpx;
	}

	.swiper-item {
		display: flex;

		image {
			width: 100%;
			height: 350rpx;
		}

		video {
			width: 100%;
			height: 350rpx;
		}
	}
	.rightbox {
		display: block;
		width: 100%;
	}

	.imgleft {
		display: block;
		// margin: 20rpx 17rpx 20rpx 0;
		margin: 8px auto;
		width: 75px;
		height: 65px;
	}

	.imgright {
		width: 17px !important;
		height: 16px !important;
		padding: 0 !important;
		margin-top: 10px;
		float: right;
	}

	.sh {
		width: 100%;
		text-align: center;
		margin-top: 10rpx;
	}

	.img {
		height: 20px;
		width: 180px;
	}
</style>

二、轮播图（不同的样式）

1、点击按钮，切换对应轮播图 

点击单面和双面按钮，切换对应轮播图

点击左右箭头或手指滑动图片，即可切换轮播图

点击图片，即可预览对应图片的详情图片

<template>
	<view class="container">
		<view class="btn">
			<uni-data-checkbox mode="tag" v-model="radio3" :localdata="sex" @change="changeType">
			</uni-data-checkbox>
		</view>
		<!-- 轮播图 -->
		<view class="center">
			<image src="../../static/jiantou1.png" style="width: 14rpx;height: 20rpx;margin: 0 auto;" @click="next1">
			</image>
			<swiper class="swiper" :circular='circular' :interval="interval" :duration="duration" :current="curDot"
				@change="swiperChange" v-show="show">
				<swiper-item v-for="(item, index) in list" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item" style="width: 100%;margin: 0 auto;height:110rpx;" @click="perview">
						</image>
					</view>
				</swiper-item>
			</swiper>
			<swiper class="swiper" :circular='circular' :interval="interval" :duration="duration" :current="curDot"
				@change="swiperChange" v-show="!show">
				<swiper-item v-for="(item, index) in list1" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item" style="width: 100%;margin: 0 auto;height:110rpx;" @click="perview">
						</image>
					</view>
				</swiper-item>
			</swiper>
			<image src="../../static/jiantou2.png" style="width: 14rpx;height: 20rpx;margin: 0 auto;" @click="next2">
			</image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 单面还是双面按钮
				radio3: 0,
				sex: [{
					text: '单面',
					value: 0
				}, {
					text: '双面',
					value: 1
				}],
				show: true, //显示单面还是双面轮播图
				url: [], //图片预览


				// 轮播图
				list: ['/static/componentoptions/500Wd.png', '/static/componentoptions/550Wd.png',
					'/static/componentoptions/600Wd.png',
					'/static/componentoptions/660Wd.png'
				], //单面图片
				list1: ['/static/componentoptions/500Ws.png', '/static/componentoptions/550Ws.png',
					'/static/componentoptions/600Ws.png',
					'/static/componentoptions/660Ws.png'
				], //双面图片
				urls: ['https://tianhecha.trinasolar.com/product/5.png',
					'https://tianhecha.trinasolar.com/product/550W1.png',
					'https://tianhecha.trinasolar.com/product/B_Web.png',
					'https://tianhecha.trinasolar.com/product/A_Web.png'
				], //单面详情图
				urls1: ['https://tianhecha.trinasolar.com/product/0908.png',
					'https://tianhecha.trinasolar.com/product/0002.png',
					'https://tianhecha.trinasolar.com/product/C.png',
					'https://tianhecha.trinasolar.com/product/D.png'
				], //双面详情图
				curDot: 0, //当前所在滑块的 index
				circular: true, //是否采用衔接滑动，即播放到末尾后重新回到开头
				autoplay: true, //是否自动切换
				interval: 2000, //自动切换时间间隔
				duration: 500, //滑动动画时长
			}
		},
		methods: {
			// 单选按钮
			changeType() {
				if (this.radio3 === 0) {
					this.show = true
				} else {
					this.show = false
				}
			},

			// 轮播图
			// 手指滑动轮播图
			swiperChange(e) {
				this.curDot = e.detail.current
			},
			// 点击图片，预览详细图片
			perview() {
				if (this.radio3 === 0) {
					this.url[0] = this.urls[this.curDot]
					uni.previewImage({
						urls: this.url,
					})
				} else {
					this.url[0] = this.urls1[this.curDot]
					uni.previewImage({
						urls: this.url,
					})
				}
			},
			// 点击左箭头
			next1() {
				this.circular = false
				let num = this.list.length - 1
				if (this.curDot <= 0) {
					this.circular = true
					this.curDot = num
				} else {
					this.curDot--
				}
			},
			//点击右箭头
			next2() {
				this.circular = true
				let num = this.list.length - 1
				if (this.curDot >= num) {
					this.curDot = 0
				} else {
					this.curDot++
				}
			},
		}
	}
</script>
<style lang="scss">
	.container {
		.uni-data-checklist .checklist-group {
			align-items: center;
			justify-content: center;
		}
		.uni-data-checklist .checklist-group .checklist-box.is--tag .checklist-text {
			color: rgb(0, 134, 214) !important;
		}
		.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked .checklist-text {
			color: #fff !important;
		}
		.uni-data-checklist .checklist-group .checklist-box.is--tag.is-checked {
			width: 33% !important;
			background-color: rgb(0, 134, 214) !important;
			border: 1px solid rgb(0, 134, 214) !important;
			margin: 20rpx 10rpx;
		}
		.uni-data-checklist .checklist-group .checklist-box.is--tag {
			background-color: white !important;
			border: 1px solid rgb(0, 134, 214) !important;
			width: 33% !important;
			margin: 20rpx 10rpx;
		}
		.uni-data-checklist .checklist-group .checklist-box .checklist-content {
			display: flex;
			flex: 1;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		.center {
			display: flex;
			width: 700rpx;
			height: 100rpx;
			align-items: center;
			margin: 0 auto;
			padding-top: 10rpx;
		}
		.swiper {
			width: 90%;
			height: 120rpx;
		}
	}
</style>

2、左右可显示一部分内容

 可显示上一张和下一张内容的一小部分内容

<template>
    <view class="home_container">
           <view class="banner" id="banner">
				<swiper class="banner-container" indicator-dots="true" indicator-color='rgb(255,255,255,0.5)'
					indicator-active-color='#fff' autoplay="true" circular="true" interval="3000" duration="1000"
					previous-margin="15px" next-margin="10px" @change="cIndex">
					<block v-for="(item,index) in swiperData" :key="index">
						<swiper-item @click.stop="goactive(item)">
							<image class="slide-image" :class="[ currentIndex === index ? 'active':'' ]"
								:src="item.coverPicture">
							</image>
						</swiper-item>
					</block>
				</swiper>
			</view>
	</view>
</template>

<script>
   export default {
        data() {
			return {
                swiperData: [], 
                currentIndex: 0, 
            }
         }，
         methods: {
            // 活动轮播点击
			cIndex(e) {
				this.currentIndex = e.detail.current
			},
            //点击图片进入详情页
			goactive(item) {
				uni.navigateTo({
					url: '/pages/tabbar/home/activity?id=' + item.id
				});
			},
         }
   }
</script>

<style lang="scss">
   .home_container {
         /* 轮播图 */
		.banner {
			height: 150px;
			width: 100vw;
			display: flex;
			flex-direction: row;
			// position: absolute;
			// z-index: 999;
		}

		.banner-container {
			width: 100vw;
			height: 150px;
		}

		.slide-image {
			position: absolute;
			height: 120px;
			width: 98%;
			border-radius: 15px;
			z-index: 5;
			opacity: 0.7;
			/*透明度*/
			top: 10%;
		}

		.active {
			opacity: 1;
			z-index: 10;
			height: 150px;
			width: 98%;
			border-radius: 15px;
			top: 0%;
			transition: all 0.2s ease-in 0s;
		}
   }

</style>