直接使用swiper做图片轮播图是没有问题的，视频轮播图的兼容性仅仅体现在APP上。
我的方法是将nvue页面作为视频的遮罩层，如果直接将视频放到nvue页面，说不定也可以。其实这个兼容性的关键在于video标签在手机上的层级过高，除了nvue，还有其他方法解决。
因为我的这个项目是图片，视频混合的轮播图，所以很多地方要判断，是否为视频，但测试时，第一项就是视频，所以很多地方判断，swiper的current是否为0。
pages/my/person.vue
<view class="person-head">
<swiper :current="swiperNum" @change="switchItem" circular indicator-dots
v-if="isVideo">
<!-- v-for循环遍历数组 -->
<swiper-item v-for="item in list4">
<image :src="item.url"></image>
</swiper-item>
</swiper>
<view v-if="!isVideo">
<video id="myVideo" src="https://cdn.uviewui.com/uview/resources/video.mp4"
autoplay="true" style="width: 100%;height: 442rpx;" :controls="false"
:enable-progress-gesture="false">
</video>
</view>
</view>
//因为nvue层级很高，如果页面很长，能上下滑动。那nvue还是始终定在屏幕上方，
//用@touchend监听手指滑动，获得这个元素距离屏幕顶端的距离，以此让nvue高度变化。
<view class="person-body" @touchend="log" id="demo">
</view>
//<script>
//在这里定义，因为很多地方都用到了。获取nvue页面
const subNvue = uni.getSubNVueById('popup'); //获取
//export default {
list4: [{
url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
title: '身无彩凤双飞翼，心有灵犀一点通'
}, {
url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
}, {
url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
title: 'image'
}],
isVideo: true,
swiperNum: 0,
onLoad(e) {
// 监听事件 ，监听nvue页面传过来的
uni.$on('getNvue', (direction) => {
//因为一旦监听这个事件，代表在左右滑动（切换轮播），所以让视频和遮罩层隐藏
//因为这里只有第一个是视频，实际要根据情况
this.isVideo = true
subNvue.hide()
//根据是左滑，还是右滑，切换轮播图
if (direction.elePosition == "left") {
if (this.swiperNum >= this.list4.length - 1) {
this.swiperNum = 0
console.log(this.swiperNum)
} else {
this.swiperNum += 1
console.log(this.swiperNum)
}
} else if (direction.elePosition == "right") {
if (this.swiperNum <= 0) {
this.swiperNum = this.list4.length - 1
} else {
this.swiperNum -= 1
}
}
})
},
onUnload() {
//要在页面关闭的时候， 移除监听事件 ，隐藏遮罩层
uni.$off('getNvue');
subNvue.hide()
},
onShow() {
// 因为这里只有第一条是视频，所以检测swiper的页数是0时， 显示nvue页面
//要根据实际情况判断
if (this.swiperNum == 0) {
subNvue.show() // 显示
}
// 因为switchItem事件，是轮播图切换时才会触发，这里考虑到第一个是视频的情况
this.$nextTick(() => {
this.switchItem()
console.log(222)
})
},
methods: {
//获得元素距离屏幕顶端的距离，计算nvue需要移动的距离，通过setStyle方法移动
log(e) {
setTimeout(() => {
let query = uni.createSelectorQuery().in(this);
query.select('#demo').boundingClientRect(data => {
console.log('元素距离顶部的距离' + data.top)
let top = data.top>=0&&data.top<=212? 0-Math.trunc(212-
data.top):-282
const subNvue = uni.getSubNVueById('popup'); //获取
subNvue.setStyle({"top": top+'px'})
}).exec();
}, 300)
},
//轮播图切换
switchItem(obj) {
console.log(obj)
// 因为测试的数据第一项是视频，所以这里是0
if (obj == undefined || obj.detail.current == 0) {
subNvue.show()
this.isVideo = false
this.swiperNum = 0 //这个也要改成视频的index
} else {
this.isVideo = true
}
console.log(this.swiperNum)
},
}
.person-head {
height: 500rpx;
background-color: #000;
} 这是person页面轮播图视频部分的遮罩层（这个页面是透明的，可以设置背景色，方便调试）。
因为直接用swiper轮播视频，两者底层逻辑之间有bug，h5端运行没问题，但真机测试有很多
bug，兼容性问题。
bug之一，video的层级太高，导致视频，左右滑动触发不了swiper的切换。
且video标签检测不到@touchstart，@touchstart等事件，也就判断不了左右滑动。
解决：nvue（只有在手机上nvue才有效果）的层级比video还高，
用nvue给video做遮罩层，监测在遮罩层上的滑动方向，判断左滑右滑，以此修改轮播图的页数
pages/my/subNVue/video.nvue
<template>
<view id="popup">
<view class="mask" @click="log" @touchstart="touchStart" @touchend="touchEnd">
</view>
</view>
</template>
<script>
export default {
data() {
return {
startTime: 0,
startPosition: 0,
endPosition: 0,
}
},
methods: {
// 起点
touchStart(event) {
this.startTime = Date.now()
this.startPosition = event.changedTouches[0].screenX
},
// 终点,计算移动距离
touchEnd(event) {
const endTime = Date.now()
if (endTime - this.startTime > 2000) {
return;
}
this.endPosition = event.changedTouches[0].screenX
//当移动距离超过10时判断左滑右滑。
if (Math.abs(this.endPosition - this.startPosition) > 10) {
this.endPosition = event.changedTouches[0].screenX
var elePosition = this.endPosition - this.startPosition > 0 ? "right" : "left"
} else {
return;
}
//将左滑还是右滑，传到父页面
console.log(elePosition)
uni.$emit('getNvue', {elePosition:elePosition});
},
}
}
</script>
<style scoped lang="scss">
.mask {
position: relative;
width: 750rpx;
height: 440rpx;
background: rgba(0,0,0,0);
}
</style>
pages.json文章来源：https://www.toymoban.com/news/detail-410139.html
添加subNVues，id名要和nvue最外层的view标签的id保持一致。文章来源地址https://www.toymoban.com/news/detail-410139.html
{
"path": "pages/my/person",
"style": {
"navigationBarTitleText": "个人主页",
"app-plus": {
"subNVues": [{
"id": "popup", // 唯一标识
"path": "pages/my/subNVue/video", // 页面路径
//"type": "popup", //原生子窗口内置样式，可取值：'popup',弹出
//层；"navigationBar",导航栏
style": {
"position":"absolute",
"height": "442rpx",
//只能用transparent使nvue页面透明，其他方法会有bug
//测试时可以改为其他颜色，方便观察
"background": "transparent"
}
}],
"scrollIndicator": "none",
"bounce": "none",
"backgroundColor": "#FFFFFF",
"titleNView": false
},
"enablePullDownRefresh": false
}
},到了这里，关于uniapp-app的视频轮播图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
