小程序备忘

小程序备忘,第1张

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

用来执行脚本

为了提升用户 *** 作的流畅性,同时让用户在微信内拥有一致的 *** 作体验,“右滑手势返回”将成为基础配置,即所有小程序内都可以从屏幕左侧边缘向右滑动返回上一个界面。 在即将发布的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属性来禁止页面滚动

在page.json里添加"disableScroll": true禁止页面滚动猛腔

注意:这样做容易导致页面在部分手机上无法完全显誉尺示,因为页面滚庆知高动直接禁用了

小程序项目中涉及到视频功能,需求就是禁止拖动进度条。但是小程序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,设置了一个跟遮罩层一样颜色一样透明度的还补全,这样从视觉效果上才算是过关。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12529504.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-26
下一篇 2023-05-26

发表评论

登录后才能评论

评论列表(0条)

保存