一文踩4个微信小程序的小(da)坑
2020/3/31 11:32:13
本文主要是介绍一文踩4个微信小程序的小(da)坑,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
IOS 下 wx:if导致 scroll-view 无法上滑
-
情况描述
-- 使用到scroll-view
组件,在第二次wx:if
的条件渲染时,会出现无法上滑但可以下拉的情况
-- 但注意,并不是所有使用使用条件渲染的都会发生此种情况
-- 初步判断是当这个scroll-view
占用内存过大才会出现这种情况
-- 因为自己写了个同样的 demo 是没有出现任何问题的,且项目中同类型的组件也没有问题
-- 有问题的组件里有一个长列表渲染,还有很多图片,这样可能导致了这个奇怪的bug -
出现机型
Iphone X 及以上,Iphone67没有问题,不知道是不是高版本IOS的原因 -
解决办法 -
层叠上下文
层叠上下文
,emmmmmmmm,竟然是面试的知识,终于用上啦~- 思路:
- 父元素相对定位
position:relative
- 不需要层叠上下文组件的直接用
wx:if
或者hidden
,因为本质上层叠上下文是没有销毁掉dom的,如果全部都使用,性能会有所下降 - 需要使用到层叠上下文的组件,设置
position:absolute
,利用z-index
值1和-1控制组件展示
- 父元素相对定位
- 思路:
安卓下 swiper 里使用fixed等于absolute
-
情况描述
-- 项目里使用到了swiper
来做列表切换,然后列表中需要根据键盘高度弹起input
-- 正常来说,使用fixed布局,input
框的位移 = 键盘高度 -input
框高度
-- 但在安卓下,还需要减去scrollTop
scrollTop,因为fixed布局失效了 -
出现机型
安卓 -
解决办法 - 小程序提供的
platform
信息
开发者可以根据platform
分为3套公式- 思路:
- IOS:键盘高度 -
input
框高度 - 安卓:键盘高度 -
input
框高度 -scrollTop
- devtools: 0
- IOS:键盘高度 -
- 思路:
scroll在数据少时无法下拉
- 情况描述
页面数据量少,元素高度无法撑开父元素,就无法进行下拉刷新 - 出现机型
都有 - 解决办法
给数据展示项外面包一层view
,view
的高度设置为101%,这样就可以下拉刷新
当然有同学会说~这样在数据少时出现滚动会很奇怪
所以可以设置隐藏滚动条的样式
微信7.0以下不支持自定义导航栏
- 情况描述
当设置了自定义的导航栏时,在低版本微信会显示两条导航栏 - 出现机型
微信7.0以下 - 解决办法
判断微信浏览器版本 低于7.0版本不支持自定义导航栏
wx.getSystemInfoSync().version.charAt(0)) >= 7
这篇关于一文踩4个微信小程序的小(da)坑的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)
- 2024-01-22基于taro搭建小程序多项目框架
- 2024-01-13小程序开发:在插件市场寻找步骤条组件并二开
- 2024-01-05钉钉小程序生态—企业机器人加互动卡片,改善用户体验的开始!
- 2023-12-29【UniApp】-uni-app-打包成小程序
- 2023-12-26性能翻倍!京东亿级体量小程序优化实践