微信小程序-video禁止拖动进度条

小程序项目中涉及到视频功能,需求就是禁止拖动进度条。但是小程序video并没有提供一个属性用来禁止进度条拖动

以上是从微信官方论坛中找到的答案,就是说如果想实现禁止拖动进度条,要么就是隐藏掉,要么就是自己自定义一个进度条。如果用show-progress=‘{{false}}’,这个属性隐藏掉了进度条,那video原本自带的底部控制栏中(播放/暂停 ,进度时间,进度条,总时长,全屏/退出全屏),这些按钮中,就只剩下全屏/退出全屏了。

开始,我决定自定义进度条,但是我发现video里嵌套的组件,虽说官网给出的是可以使用view,但是只有界面效果,却触发不了view对应的方法,也就是说,我用slider组件自定义了一个进度条,并且禁用,然而不管用。

注意:就是如果你想全部隐藏掉自带的底部控制栏,就要在video里设置属性:controls='{{false}}'。但设置了这个属性,你想设置视频封面的图片的属性就无效了。

于是乎,几经波折,来回调试,最终还是决定用video自带的控制栏,通过在进度条位置,设置一个遮罩层,再设置一下透明度,这样,光标点不到进度条,就拖动不了了。当然,这个遮罩层也是要用<cover-view>

在设置遮罩层时,还遇到了问题,就是position: relative; opacity:0;无效!!!

改成这样::position: absolute;opacity:0;模拟器,安卓手机上都没问题,iOS真机上无效!!!

但是我发现,将透明度改大一点,大于0,iOS上就可以了。

所以,我用

wx.getSystemInfo,来判断设备,如果是iOS,那就设置透明度为0.1,如果是安卓,就为0.

其实到这里,问题基本解决了,但是还有一点点瑕疵,就是因为保留了本身的控制栏,那全屏/退出全屏的按钮功能要保留,所以遮罩层不能罩到要用的按钮,不然就都点击不了,所以在使用的按钮上我用view,设置了一个跟遮罩层一样颜色一样透明度的还补全,这样从视觉效果上才算是过关。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 7,422评论 0 17
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,761评论 1 32
  • 使用sketch最重要的一点是设计好控件的规范。 为做好设计规范需要对色彩进行编号,比如:color_a”_1,c...
    youyeath阅读 26,753评论 2 237
  • 官网中文版 1 简易天空替换## 技能:线性擦除,追踪运动,用颜色键K出人物,用色彩曲线调色。(1)天空图片素材放...
    朱细细阅读 11,710评论 4 81
  • 时光总会让你成长 慢慢你明白当初看不清的过不去的坎现在都不算什么 那些你认为无法放下的事情 也终会被温暖填满 人生...
    北孤先生阅读 165评论 0 0

友情链接更多精彩内容