IOS 下 wx:if导致 scroll-view 无法上滑
-
情况描述
– 使用到scroll-view
组件,在第二次wx:if
的条件渲染时,会出现无法上滑但可以下拉的情况
– 但注意,并不是所有使用使用条件渲染的都会发生此种情况
– 初步判断是当这个scroll-view
占用内存过大才会出现这种情况
– 因为自己写了个同样的 demo 是没有出现任何问题的,且项目中同类型的组件也没有问题
– 有问题的组件里有一个长列表渲染,还有很多图片,这样可能导致了这个奇怪的bug -
出现机型
Iphone X 及以上,Iphone67没有问题,不知道是不是高版本IOS的原因 -
解决办法 -
层叠上下文
层叠上下文
,emmmmmmmm,竟然是面试的知识,终于用上啦~
– 思路:
a. 父元素相对定位position:relative
b. 不需要层叠上下文组件的直接用wx:if
或者hidden
,因为本质上层叠上下文是没有销毁掉dom的,如果全部都使用,性能会有所下降
c. 需要使用到层叠上下文的组件,设置position:absolute
,利用z-index
值1和-1控制组件展示
安卓下 swiper 里使用fixed等于absolute
-
情况描述
– 项目里使用到了swiper
来做列表切换,然后列表中需要根据键盘高度弹起input
– 正常来说,使用fixed布局,input
框的位移 = 键盘高度 -input
框高度
– 但在安卓下,还需要减去scrollTop
scrollTop,因为fixed布局失效了 -
出现机型
安卓 -
解决办法 - 小程序提供的
platform
信息
开发者可以根据platform
分为3套公式
– 思路:
a. IOS:键盘高度 -input
框高度
b. 安卓:键盘高度 -input
框高度 -scrollTop
c. devtools: 0
scroll在数据少时无法下拉
- 情况描述
页面数据量少,元素高度无法撑开父元素,就无法进行下拉刷新 - 出现机型
都有 - 解决办法
给数据展示项外面包一层view
,view
的高度设置为101%,这样就可以下拉刷新
当然有同学会说~这样在数据少时出现滚动会很奇怪
所以可以设置隐藏滚动条的样式
微信7.0以下不支持自定义导航栏
- 情况描述
当设置了自定义的导航栏时,在低版本微信会显示两条导航栏 - 出现机型
微信7.0以下 - 解决办法
判断微信浏览器版本 低于7.0版本不支持自定义导航栏
wx.getSystemInfoSync().version.charAt(0)) >= 7