首页 > 其他分享 >uniapp中轮播控件中video播放器不能播放等,事件失效

uniapp中轮播控件中video播放器不能播放等,事件失效

时间:2024-04-17 10:44:05浏览次数:18  
标签:控件 鼠标 uniapp 元素 video 事件 pointer 轮播

如题:在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

相关文章

  • 界面控件DevExpress Blazor UI v23.2 - 浅谈增强的可访问性
    DevExpress BlazorUI组件库提供了一套全面的原生Blazor组件(包括DataGrid、PivotGrid、调度程序、图表、数据编辑器和报表),使用C#为BlazorServer和BlazorWebAssembly创建高影响力的用户体验!获取DevExpressv23.2正式版下载DevExpress技术交流群10:532598169      欢迎......
  • uniapp checkbox_group实现全选和反选功能
    <template> <view> <label> <checkbox:value="value":checked="allpicks"@tap="allpick"/><text>全选</text> </label> <checkbox-groupname="allpick"> <label......
  • uniapp踩坑:编译H5解决浏览器跨域问题
    uniapp编译到app是不存在跨域问题的,但是编译到H5就会有跨域问题。记录一下工作中遇到跨域及解决跨域方法方法一:直接编译Hbuilder内置浏览器,能解决跨域,但是内置浏览器调试没有谷歌爽方法二:在manifest.json文件中配置跨域,该方法类似vue.config.js中的devServer 步骤一"......
  • BinGoo系列之Socket组件《三、客户端+服务端组件的封装》 控件版(转)
    简介:继【C#原生Socket网络通讯】BinGoo系列之Socket服务端+客户端 之后,进一步封装的原生socket网络通讯组件。在此之前的版本还是要写一部分绑定委托事件代码,新版通讯类库将所有的消息机制全部封装成事件。只需拖动组件至窗体,直接双击组件注册事件,无需再写有关socket的代码,......
  • uniapp优缺点
    UniApp是一个使用Vue.js开发跨平台应用的开发框架。它允许开发者使用同一套代码基础来构建面向iOS、Android、以及各种小程序、H5等多个平台的应用。优点:一次编写,多端运行:只需编写一次代码,便可以生成可以运行在不同平台(iOS、Android、H5、小程序等)的应用。学习成本低......
  • uniapp小程序页面实现元素与胶囊进行居中对齐
    无论是否为uni,关键在于获取胶囊中点的位置,如果是原生小程序根据小程序文档获取,其余逻辑处理是一致的代码语法都只是技术选择,重点是逻辑处理,对于技术的运用,代码技术好比是积木,好的程序就是好的组合代码,利用技术的特点进行组合,1.效果实现代码fixedTop(){lets......
  • Avalonia 中的样式和控件主题
    在Avalonia中,样式是定义控件外观的一种方式,而控件主题则是一组样式和资源,用于定义应用程序的整体外观和感觉。本文将深入探讨这些概念,并提供示例代码以帮助您更好地理解它们。样式是什么?样式是一组属性,用于定义控件的外观。它们可以包括背景色、边框、字体样式等。在Avalonia......
  • WPF,Frame控件的一个BUG
    我使用WPF默认的frame<FrameStyle="{DynamicResourceFrameStyle1}"x:Name="frame"Height="80"NavigationUIVisibility="Visible"/>然后添加几次导航Task.Run(async()=>{this.Dispatcher.BeginInvoke(()=>this.frame.N......
  • QML::自绘基础控件
    自绘基础控件1.01Button,对属性进行封装,如字体、背景颜色、前景文字显示、(选择、悬停、按下)状态变化。对外提供必要的设置属性。importQtQuick2.0importQtQuick.Controls2.5importQtGraphicalEffects1.12Button{id:container//提供对外字段属性prop......
  • uniapp实现虚拟列表(元素固定高度)
    一、应用场景当接口返回数据太多时,前端可使用虚拟列表,实现长列表。二、原理只有在屏幕部分元素被显示出来,并且被更新,始终只有固定数量的节点,不会卡顿。三、效果图四、思路步骤使用Object.freeze冻结对象,极大优化性能生成多个元素的options,或者动态获取根据onPag......