<view class="video-list">
<view class="swiper-box">
<swiper vertical="true" @change="swiperChange" duration="100" :current="currentPage" :style="{height:swiperHeight}">
<swiper-item v-for="(item,index) in homePosts" :key="index">
<scroll-view scrool-y="true" class="scrol">
<view class="video-wrap">
<!-- <view class="video-wrap swiper-item"> -->
<video id="myVideo" :height="swiperHeight" @play="play" :src="item.thumb" :poster="item.imgurl" controls objectFit="fill" @ended="autoNext">
</video>
</view>
<!-- 悬浮按钮 -->
<view class="btn-wrap" v-if="btn">
<button type="primary" class="btn-transparent">悬浮按钮一{{index}}</button>
<button type="primary" class='btn-transparent'>{{item.thumb}}悬浮按钮二</button>
</view>
<view class="list">很长很长的一个列表~</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</view>
swiperChange(e){
const targetPage = e.detail.current;
if (targetPage === this.currentPage + 1) {
console.log("向上滑动");
this.$refs.players[this.currentPage + 1].playFromHead(); // 下一个开始播放并且从头开始播放
this.$refs.players[this.currentPage].pause(); // 当前视频暂停播放
} else if(targetPage === this.currentPage - 1) {
console.log("向下滑动");
this.$refs.players[this.currentPage - 1].playFromHead(); // 上一个开始播放并且从头开始播放
this.$refs.players[this.currentPage].pause(); // 当前视频暂停播放
}
this.currentPage = targetPage;
//end 后加的
let index = e.target.current;
this.videoCur = index;
let newVideo = uni.createVideoContext(String(index));
if (this.video !== newVideo) {
newVideo.play();
this.video.pause();
}
this.video = newVideo;
}
小程序正常可以切换
手机不行
滑动一页下视频换不了
求大神解决
3 个回复
r***@qq.com
Hdhdhdhdhhshs
r***@qq.com
Jejehehrhhreheh
DCloud_heavensoft
hello uni-app的模板里,还有插件市场,有大量的视频上下滑动和类抖音的模板,看下别人怎么做的。如果要防抖音,app端要用nvue写。
jtshushu (作者)
好的 非常感谢
2020-03-19 11:50