如题:在uniapp中轮播控件中video播放器不能播放等,事件失效的原因与解决方法:
原因: 一、首先css中的pointer-events为DOM元素的鼠标事件,值如下:
1、auto-----默认值,鼠标事件可以穿透到设置该样式的元素,该元素的鼠标事件的触发;
2、none-----不再监听该元素的鼠标事件,而是直接穿透鼠标事件去监听该元素的子元素的鼠标事件。
3、其他值-----这里暂时不去说明
二、在uniapp的轮播控件中swiper-item中的子元素(这里是video控件)被设置了样式pointer-events: none;所以导致子元素的鼠标事件失效。
解决方法:修改swiper-item中的子元素(这里是video控件)的样式:pointer-events: auto !important;
实例:
html: <!-- 轮播video视频 --> <uni-swiper-dot class="uni-swiper-dot-box" :info="dataVideo" :current="current" field="content"> <swiper class="swiper-box" :current="swiperDotIndex"> <swiper-item v-for="(item, index) in dataVideo" :key="index"> <view class="swiper-item" > <video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" controls></video> </view> </swiper-item> </swiper> <text class="swiper-more" @tap="goMoreSwiper">更多>></text> </uni-swiper-dot> css: .swiper-item { video{ pointer-events: auto !important; } }
标签:控件,鼠标,uniapp,元素,video,事件,pointer,轮播 From: https://www.cnblogs.com/YiFeng-Liu/p/18140059