微信小程序之video组件与cover 您所在的位置:网站首页 images/bf/66/dd6b10bd486d83d26140ef83ef4f/1855ca1d-3475-4ea0-bf64-67a8cef9e7e7.png 微信小程序之video组件与cover

微信小程序之video组件与cover

2022-12-14 00:21| 来源: 网络整理| 查看: 265

前言:最近忙着赶项目,没时间更博;希望和大家一起学习一起进步。

本人遇到的坑,以及爬出坑的方法:在某个微信小程序项目中,有这样一个需求:在滑块swiper组件和swiper-item组件中嵌套video,然后自定义一个播放的按钮替换默认的播放按钮和位置(我开始用的方法是用相对定位,把图片直接定位在视频的中央地方,问题就出现了,由于文档已经给了提示,最好不要在滑块swiper组件和swiper-item组件中嵌套video,所以,最后导致,第一个滑块可以正常看到播放按钮,其他的则不行,会随着滑块滑动而隐藏其他的播放按钮(因为微信小程序video的z-idnex是最高级的),后来度娘说用组件cover-view或cover-image组件可以实现覆盖在video,上,果然,显示是可以了,但是,播放按钮的位置漂浮不定,根本不能满足需求;后来灵感一来,发现,把video组件和image组件放在两个view组件里,用相对定位,然后把video的z-index设置为-1;image的z-index大于1就行,然后就解决了。实现滑块滑动,播放按钮稳稳的跟着视频滑动)

 

wxml代码:(主要看结构)

wxss代码: .swiper-cnt { display: flex; flex-direction: column; width:664rpx; margin-left:40rpx; position: relative; } .video-cnt { position: absolute; top:0; left: 0; z-index: -1!important; width: 641rpx; height: 465rpx; } .play-btn { width: 70rpx; height: 70rpx; position: absolute; top: 232.5rpx; left: 320.5rpx; margin: -35rpx 0 0 -35rpx; z-index: 100; } .swiper-cnt .video-cnt video { border-radius: 12rpx; width: 100%; height: 100%; }

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有