主页：pages / Index.vue -> 子组件 pages / Home.nvue -> 子组件 componets / main / h5-video.nvue
主页：pages / Index.vue ：
<template>
<view class="index-images" >
<Home ref="home" ></Home>
</view>
</template>
import Home from './Home.nvue'
<script>
export default {
components: {
Home
},
}
</script>子组件 pages / Home.nvue：
<template>
<view >
<swiper class="swiper" style="height: 100vh;" @change="changeSwiper" :indicator-dots="false" :autoplay="true" :interval="1000" :duration="0" :disable-touch='true' >
<swiper-item v-for="(v,k) in list">
<h5Video v-if="k == swiperIndex" :config="v.path"/>
</swiper-item>
</swiper>
</view>
</template>
<script>
import h5Video from '@/components/main/h5-video.nvue'
export default {
components: {
h5Video,
},
data() {
return {
list:[
{key:0,path:'https://chama.oss-cn-beijing.aliyuncs.com/storage/default/2023039/1c5375f437aa2bebcafe3e4f333a34c9d0e682ad.mp4'},
{key:1,path:'https://chama.oss-cn-beijing.aliyuncs.com/storage/default/2023039/a5a71a84da8c76d0c4953077e2abdd7b2c607856.mp4'},
],
swiperIndex: 0,
}
},
//方法集合,
methods: {
changeSwiper(e) {
this.swiperIndex = e.detail.current
},
},
}
</script>
<style lang='less' scoped>
</style>子组件 componets / main / h5-video.nvue
<template>
<view >
<video
v-if="src"
:http-cache='false'
:custom-cache='false'
codec='software'
@error="videoErrorCallback()"
:autoplay="true"
:loop="true"
:src="src"
:controls="false"
:show-fullscreen-btn='false'
object-fit='fill'
style="width: 500px; height: 600px;"
/>
</view>
</template>
<script>
export default {
props: { config: String },
data() {
//这里存放数据
return {
src:''
};
},
//方法集合,
methods: {
videoErrorCallback(){
this.$nextTick(()=>{
this.src = this.src+"?time="+ new Date().getTime()
})
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
this.src = this.config
},
beforeDestroy()
{
this.src=''
}
}
</script> 
1***@qq.com (作者)
有人吗，大佬们 救救孩子
2023-03-21 16:15