ios 小程序兼容问题(下拉刷新)

小程序下拉刷新步骤：

如需所有的页面都实现下拉刷新的话，那需要在全局文件app.json里的window里设置enablePullDownRefresh这个属性(与步骤1设置一样)。

完成以上步骤就可实现下拉刷新了~

ios端，页面无法下拉刷新(就是根本下拉不了，触发不了事件)。只有当右侧的滚动条滚动到底部后，再下拉刷新时才有效果。安卓端是没有问题的。

但是，开发者工具上测试一直都是没有问题的。

问题的原因：

是 因为在首页上父元素用到了绝对定位( position: fixed)，导致了ios端无法下拉刷新 ，把绝对定位改为相对定位就可以了(position: relative)。

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

用来执行脚本

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

众多类似商城项目中，都会有列表分类标签随着界面滚动吸顶的效果

APP中实现相关功能很容易，h5也可以动态 *** 作DOM来设置

微信小程序没有DOM，该怎么实现呢？

其实这个场景还是比较简单的，正常情况下导航标签是在列表中间的，滑到顶部时吸顶，再拉下来时又回到原来的位置

根据场景，有两个参考思路：

1、顶部定位一个常在的同样的导航标签，通过页面的 scrollOffset 来控制显隐即可

2、通过动态添加 fixed 样式，来动态改变标签在页面中的位置

ps：不过第二种思路会有一个缺陷就是切换位置时页面会因为少了一部分而上移，所以还是需要补白，所以还是用第一种思路

我这里是用了自定义导航栏的，所以实现上会有所不同，如果是用系统导航栏可以稍微调整一下，因为偏移量会有所区别

CSS部分

JS部分

其中 CacheUtil.naviStatuHeight 这个是我应用启动时获取的导航+状态栏高度，X和其他机型还是有所区别，如果是系统导航栏的话这些相关逻辑都可以省略

这里为什么用navigator而不用view呢？

因为navigator是原生组件，可以在最上层，因为有可能列表内容有原生组件的话滑动就会有问题，所以navigator在不设置url的情况下和view的效果差不多，故采用navigator

cover-view：bug: 自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示，而且使用的版本限制也很多，所以就不考虑

---