|
|
@@ -2,7 +2,7 @@
|
|
|
<view class="pages">
|
|
|
<view class="" :style="{height: navHeight+'px' }"></view>
|
|
|
<view class="swiper-wrap">
|
|
|
- <u-swiper
|
|
|
+ <!-- <u-swiper
|
|
|
:list="bannerList"
|
|
|
indicator
|
|
|
height="750rpx"
|
|
|
@@ -12,7 +12,40 @@
|
|
|
:circular="true"
|
|
|
imgMode="aspectFit"
|
|
|
@click="bannerClick()"
|
|
|
- ></u-swiper>
|
|
|
+ ></u-swiper> -->
|
|
|
+ <swiper
|
|
|
+ class="swiper"
|
|
|
+ indicator-color="rgba(255,255,255,0.3)"
|
|
|
+ indicator-active-color="#fff"
|
|
|
+ circular
|
|
|
+ @change="bannerChange"
|
|
|
+ :current="bannerCurrent"
|
|
|
+ :indicator-dots="true"
|
|
|
+ :autoplay="false"
|
|
|
+ :interval="5000"
|
|
|
+ :duration="500">
|
|
|
+ <swiper-item @click="bannerClick(item)" v-for="(item,index) in bannerList" :key="index">
|
|
|
+ <u--image
|
|
|
+ v-if="item.type==1"
|
|
|
+ :showLoading="true"
|
|
|
+ :src="item.sliderImg"
|
|
|
+ width="100%"
|
|
|
+ height="750rpx"
|
|
|
+ >
|
|
|
+ </u--image>
|
|
|
+ <!-- object-fit== contain：包含，fill：填充，cover：覆盖 -->
|
|
|
+ <video
|
|
|
+ style="width: 100%;height: 100%"
|
|
|
+ v-if="item.type==2"
|
|
|
+ object-fit="fill"
|
|
|
+ :id="`videoId${ index + 1}`"
|
|
|
+ :autoplay="false"
|
|
|
+ src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
|
|
+ @error="videoErrorCallback"
|
|
|
+ :controls="false">
|
|
|
+ </video>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
</view>
|
|
|
<view class="swiper-block" :style="{height: ( 375 - navHeight )+'px' }"></view>
|
|
|
<view class="page-wrap">
|
|
|
@@ -138,6 +171,9 @@
|
|
|
return {
|
|
|
staticUrl:this.$commonConfig.staticUrl,
|
|
|
bannerList: [],
|
|
|
+ bannerCurrent: 0,
|
|
|
+ previousIndex: 0,
|
|
|
+ currentVideoIndex: -1,
|
|
|
centerImg:[],
|
|
|
hotGoods:[],
|
|
|
memberInfo:{},
|
|
|
@@ -233,15 +269,34 @@
|
|
|
console.log('swiperList',err.data);
|
|
|
})
|
|
|
},
|
|
|
- bannerClick(e){
|
|
|
+ bannerClick(item){
|
|
|
// console.log('e',e);
|
|
|
// console.log('bannerClick',this.bannerList[e]);
|
|
|
- let item = this.bannerList[e];
|
|
|
+ // let item = this.bannerList[e];
|
|
|
uni.$u.route('/xushuo/dynamicdetails', {
|
|
|
type: 'swiperDetail',
|
|
|
id: item.id
|
|
|
});
|
|
|
},
|
|
|
+ bannerChange(event){
|
|
|
+ console.log('current',event.detail);
|
|
|
+ // console.log('bannerCurrent',this.bannerCurrent);
|
|
|
+ // console.log('bannerChange',this.bannerList[event.detail.current]);
|
|
|
+
|
|
|
+ const currentSwiperIndex = event.detail.current;
|
|
|
+
|
|
|
+ if (
|
|
|
+ this.bannerList[currentSwiperIndex].type === 2 &&
|
|
|
+ currentSwiperIndex !== this.currentVideoIndex
|
|
|
+ ) {
|
|
|
+ const previousVideoId = 'videoId' + (this.currentVideoIndex + 1);
|
|
|
+ const previousVideo = uni.createVideoContext(previousVideoId, this);
|
|
|
+ previousVideo.stop();
|
|
|
+ this.currentVideoIndex = currentSwiperIndex;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.previousIndex = currentSwiperIndex;
|
|
|
+ },
|
|
|
centerImgClick(e){
|
|
|
let item = this.centerImg[e];
|
|
|
uni.$u.route('/xushuo/dynamicdetails', {
|
|
|
@@ -291,7 +346,11 @@ page{
|
|
|
left: 0;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
+ height: 750rpx;
|
|
|
z-index: 10;
|
|
|
+ .swiper{
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
.page-wrap{
|
|
|
position: relative;
|
