uniapp开发app使用SUBNVUE制作带video的swiper轮播图步骤及遇到的问题

新建nvue页面

uniapp开发app使用SUBNVUE制作带video的swiper轮播图步骤及遇到的问题_第1张图片

在pages.json中配置

uniapp开发app使用SUBNVUE制作带video的swiper轮播图步骤及遇到的问题_第2张图片

在你需要放置原生子窗体的页面初始化subNvue(id为上面pages.json配置的id)

然后在nvue页面写你需要的swiper嵌套video的代码,重启HBuilderX和虚拟机看看(略)

nvue页面使用uni.createVideoContext获取不到对象无法执行pause方法的问题

使用$refs获取可以使用

uniapp开发app使用SUBNVUE制作带video的swiper轮播图步骤及遇到的问题_第3张图片

 nvue页面的生命周期问题

想在页面隐藏的时候让播放的video停止,在放置nvue页面的vue页面onHide周期给nvue页面传参,监听这个参数的变化让视频停止播放

放置原生子窗体的页面

 nvue页面接收参数

uniapp开发app使用SUBNVUE制作带video的swiper轮播图步骤及遇到的问题_第4张图片

nvue页面样式限制video标签设置不了圆角

使用cover-image给video四个角加上圆角图片

你可能感兴趣的:(uni-app)