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

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

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

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

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

在设置遮罩层时，还遇到了问题，就是position: relativeopacity:0无效！！！

改成这样：：position: absoluteopacity:0模拟器，安卓手机上都没问题，iOS真机上无效！！！

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

所以，我用

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

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

首先我们建立一个演示的小程序片段

然后在wxml中将d窗的界面定义好

接下来就是定义d窗的样式，主要是遮罩层的样式

然后在js中声明变量，它用来控制d窗是否显示

接着我们就可以看到d窗的界面了

最后在定义一下取消d窗的事件就可以了

综上所述，在小程序开发的时候自定义d窗还是很简单的，主要定义好遮罩层，然后设置好d窗位置就可以了

小程序开发工具--详情--本地设置--启用自定义处理命令

用来执行脚本

为了提升用户 *** 作的流畅性，同时让用户在微信内拥有一致的 *** 作体验，“右滑手势返回”将成为基础配置，即所有小程序内都可以从屏幕左侧边缘向右滑动返回上一个界面。 在即将发布的7.0.5客户端版本中，页面配置中的 disableSwipeBack 属性将不再生效，请开发者及时调整。

背景图为fixed， top随滚动而改变 。 重点就是 onPageScroll 。

还可使用 scroll-view 的下拉刷新，且可以自定义样式。

用wxs监听滚动事件，设置样式。

不在以下 request 合法域名列表中，请参考文档

解决方案：在详情--本地设置中勾选“不校验合法域名。。。”

mode widthFix 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变。应避免使用widthFix，尽量指定宽高。

导航栏高度

iOS 44px （4+32+8）

android 48px （8+32+8）

胶囊与状态栏间距（应该计算得出）ios 4px，Android 8px，与导航栏底边距8px（只能取固定值）。

胶囊高度 32px

状态栏高度，刘海屏通常为44px

setData 是小程序开发中使用最频繁、也是最容易引发性能问题的接口。

因此，开发者在调用 setData 时要注意：

数组索引不能直接用变量，解决方案：

取原来的值：

在onUnload中取消timer

微信小程序中，可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意，大部分组件是不支持该属性的。

目前支持 hover-class 属性的组件有三个：view、button、navigator。

不支持 hover-class 属性的组件，同时也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。

如果background写在wxml中，那么background-size也要写在style中，如果写在wxss中不会生效。

获取系统屏幕边框的安全距离：

safe-area-inset-top

safe-area-inset-right

safe-area-inset-bottom

safe-area-inset-left

ios11：constant（safe-area-inset-bottom）

ios11.2：env（safe-area-inset-bottom）

scroll-view的子元素最好包一层，不然宽度可能不起作用。

当小程序使用页面进行滚动时，可以给遮罩设置catchtouchmove属性来禁止页面滚动

---