修改首页轮播颤抖问题

pages/tabbar/pagehome/pagehome.vue

@@ -25,7 +25,21 @@
 			<view class="pad-x180">
 				<!-- 自定义轮播 -->
 				<view :style="{marginTop: (statusHNH+60)+'px'}">
-					<swiper-pu :bannerList="bannerList"></swiper-pu>
+					<!-- <swiper-pu :bannerList="bannerList"></swiper-pu> -->
+					<view  class="banner-box">
+						<swiper :current="bcurrent" @change="changeBanner" :style="{height: 200+'px'}" :autoplay="isAutoPlay" :circular="true" :interval="3000" :duration="500">
+							<swiper-item v-for="(item,index) in bannerList" :key="index">
+								<view @tap="chooseImg(index)" class="posir">
+									<image :style="{borderRadius:0+'px',height:200+'px'}" class="img" :src="item.imgSrc" mode="aspectFill"></image>
+									<image @tap.stop="playVideo(index)" v-if="item.isVideo" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);width: 126rpx;height: 126rpx;z-index: 1;" src="/static/public/video.png" mode=""></image>
+								</view>
+							</swiper-item>
+						</swiper>
+						<!-- 指示点 -->
+						<view class="dot-box" :style="{bottom:18+'px'}">
+							<view :class="bcurrent==indexd ? 'dotActive' : 'dotMo'" v-for="(itemd,indexd) in bannerList.length" :key="indexd"></view>
+						</view>
+					</view>
 				</view>
 				<!-- 宫格 -->
 				<view v-if="gonggList.length>1" class="mar-zy30 bacf radius10 pad-s25 mar-s10 disac fw">
@@ -132,7 +146,9 @@
 				bannerList:[],//轮播图
 				jieDuan:false,
 				isNewRenderDone:false ,//锁的作用
-				isQuan:true
+				isQuan:true,
+				bcurrent:0,
+				isAutoPlay:false
 			}
 		},
 		onPageScroll(e) {
@@ -147,6 +163,9 @@
 				this.isZanw = false
 			}
 		},
+		onHide() {
+			this.isAutoPlay = false;
+		},
 		onShow() {
 			log('输出的解构')
 			this.checkNet()
@@ -162,6 +181,7 @@
 				uni.setStorageSync('chu',1)
 			}
 			this.checkKT()//恒美课堂列表
+			this.isAutoPlay = true;
 		},
 		onShareAppMessage(res) {},
 		onLoad(options) {
@@ -217,6 +237,15 @@
 			this.$toolAll.tools.buriedPointAll()//查询需要埋点的事件id
 		},
 		methods: {
+			changeBanner(e){
+				this.bcurrent = e.detail.current//当前的指示点下标
+			},
+			playVideo(index){
+				// console.log('播放视频');
+				uni.navigateTo({
+					url:`/pagesB/video/playVideo?src=${this.bannerList[index].url}&posterSrc=${this.bannerList[index].poster}`
+				})
+			},
 			closeEv(){
 				this.isQuan = false;
 			},
@@ -506,5 +535,9 @@
 </script>
 
 <style>
-
+.banner-box{position: relative;}
+.img{width:100%;}
+.dot-box{position: absolute;bottom: 36rpx;display: flex;justify-content: center;width: 100%;}
+.dotActive{width: 22rpx;height: 12rpx;margin-right: 10rpx;border-radius: 20rpx; background-color: rgba(56, 117, 246, 1);}
+.dotMo{width: 12rpx;height: 12rpx;margin-right: 10rpx;border-radius: 100%;background-color: rgba(191, 191, 191, 1);}
 </style>