微信小程序-video禁止拖动进度条
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序-video禁止拖动进度条相关的知识,希望对你有一定的参考价值。
参考技术A 小程序项目中涉及到视频功能,需求就是禁止拖动进度条。但是小程序video并没有提供一个属性用来禁止进度条拖动以上是从微信官方论坛中找到的答案,就是说如果想实现禁止拖动进度条,要么就是隐藏掉,要么就是自己自定义一个进度条。如果用show-progress=‘false’,这个属性隐藏掉了进度条,那video原本自带的底部控制栏中(播放/暂停 ,进度时间,进度条,总时长,全屏/退出全屏),这些按钮中,就只剩下全屏/退出全屏了。
开始,我决定自定义进度条,但是我发现video里嵌套的组件,虽说官网给出的是可以使用view,但是只有界面效果,却触发不了view对应的方法,也就是说,我用slider组件自定义了一个进度条,并且禁用,然而不管用。
于是乎,几经波折,来回调试,最终还是决定用video自带的控制栏,通过在进度条位置,设置一个遮罩层,再设置一下透明度,这样,光标点不到进度条,就拖动不了了。当然,这个遮罩层也是要用<cover-view>
在设置遮罩层时,还遇到了问题,就是position: relative; opacity:0;无效!!!
改成这样::position: absolute;opacity:0;模拟器,安卓手机上都没问题,ios真机上无效!!!
但是我发现,将透明度改大一点,大于0,iOS上就可以了。
所以,我用
wx.getSystemInfo,来判断设备,如果是iOS,那就设置透明度为0.1,如果是安卓,就为0.
其实到这里,问题基本解决了,但是还有一点点瑕疵,就是因为保留了本身的控制栏,那全屏/退出全屏的按钮功能要保留,所以遮罩层不能罩到要用的按钮,不然就都点击不了,所以在使用的按钮上我用view,设置了一个跟遮罩层一样颜色一样透明度的还补全,这样从视觉效果上才算是过关。
微信小程序-进度条-刻度
js
var app = getApp()
Page({
data: {
num:8,//这是当前有几个人
jindutiao: [ //这个是进度条的标准,刻度
{
num:3,
price:\'999\'
},
{
num: 5,
price: \'799\'
},
{
num: 10,
price: \'599\'
}
],
},
onLoad:function(){
this.jindutiao();
},
jindutiao: function () {
var that = this;
var jindutiao = that.data.jindutiao;
var num = that.data.num;
var p = 0;
for (var i = 0; i < jindutiao.length; i++) {
if (jindutiao[i].num > num) {
p = i;
break;
}
}
if (i == jindutiao.length) { p = i; }
for (var j = 0; j < p; j++) {
jindutiao[j].statu = true;
}
if (p == 0) {
num = 0.5 / jindutiao.length * 100;
} else if (jindutiao[p - 1].num < num) {
num = (p + 0.5) / jindutiao.length * 100;
//毕竟不是当前进度等分,所以让他在等于8,7,6的时候也能在中间。就加0.5
} else {
num = p / jindutiao.length * 100;
//当前黄色进度长度就是当前人数除以总人数乘以100,就是进度条宽度的百分比。
}
that.setData({
width: num,
p: p,
jindutiao: jindutiao
})
},
})
CSS
<view class="bigs1" >
<view class=\'hui\'>
<block wx:for="{{jindutiao}}">
<view class=\'viewsmall\'></view>
<view class="zhongJianSelect"wx:if="{{item.statu}}"></view>
<view class="zhongJian"wx:else></view>
</block>
</view>
<!--刻度杠 -->
<view class=\'kedudian\'style="left:{{width-11}}%">
<image mode=\'scaleToFill\' src=\'../img/dialog.png\' class=\'jinduPng\'></image>
<text class=\'cantuanNumber\'>{{num}}人已参团</text>
</view>
<view class=\'huang\' style="width:{{width}}%"></view>
</view>
<view class=\'bigs2\'>
<view class=\'viewbig\'>
<block wx:for="{{jindutiao}}">
<view class=\'viewsmall2\' wx:if="{{item.statu}}">
<text class=\'viewsmall2Text\'>{{item.num}}人团</text>
<text class=\'viewsmall2Text\'>¥{{item.price}}</text>
</view>
<view class=\'viewsmall2\' wx:else>
<text class=\'viewsmall2Text viewsmall2TextSelect\'>{{item.num}}人团</text>
<text class=\'viewsmall2Text viewsmall2TextSelect\'>¥{{item.price}}</text>
</view>
</block>
</view>
wxml
<view class="bigs1" >
<view class=\'hui\'>
<block wx:for="{{jindutiao}}">
<view class=\'viewsmall\'></view>
<view class="zhongJianSelect"wx:if="{{item.statu}}"></view>
<view class="zhongJian"wx:else></view>
</block>
</view>
<!--刻度杠 -->
<view class=\'kedudian\'style="left:{{width-11}}%">
<image mode=\'scaleToFill\' src=\'../img/dialog.png\' class=\'jinduPng\'></image>
<text class=\'cantuanNumber\'>{{num}}人已参团</text>
</view>
<view class=\'huang\' style="width:{{width}}%"></view>
</view>
<view class=\'bigs2\'>
<view class=\'viewbig\'>
<block wx:for="{{jindutiao}}">
<view class=\'viewsmall2\' wx:if="{{item.statu}}">
<text class=\'viewsmall2Text\'>{{item.num}}人团</text>
<text class=\'viewsmall2Text\'>¥{{item.price}}</text>
</view>
<view class=\'viewsmall2\' wx:else>
<text class=\'viewsmall2Text viewsmall2TextSelect\'>{{item.num}}人团</text>
<text class=\'viewsmall2Text viewsmall2TextSelect\'>¥{{item.price}}</text>
</view>
</block>
</view>
转载 https://blog.csdn.net/qq_34622811/article/details/80900361
以上是关于微信小程序-video禁止拖动进度条的主要内容,如果未能解决你的问题,请参考以下文章
微信小程序(原生)——video视频禁止拖动进度条可全屏观看等视频播放结束事件数据监听显示播放时长固定倍速视频去除黑边等