一文踩4个微信小程序的小(da)坑

IOS 下 wx:if导致 scroll-view 无法上滑

---

1. 情况描述
   -- 使用到 scroll-view 组件，在第二次 wx:if 的条件渲染时，会出现无法上滑但可以下拉的情况
   -- 但注意，并不是所有使用使用条件渲染的都会发生此种情况
   -- 初步判断是当这个 scroll-view 占用内存过大才会出现这种情况
   -- 因为自己写了个同样的 demo 是没有出现任何问题的，且项目中同类型的组件也没有问题
   -- 有问题的组件里有一个长列表渲染，还有很多图片，这样可能导致了这个奇怪的bug

2. 出现机型
   Iphone X 及以上，Iphone67没有问题，不知道是不是高版本IOS的原因

3. 解决办法 - 层叠上下文
层叠上下文，emmmmmmmm，竟然是面试的知识，终于用上啦~
   

   • 思路：
     • 父元素相对定位 position:relative
     • 不需要层叠上下文组件的直接用 wx:if 或者 hidden，因为本质上层叠上下文是没有销毁掉dom的，如果全部都使用，性能会有所下降
     • 需要使用到层叠上下文的组件，设置 position:absolute，利用 z-index 值1和-1控制组件展示

安卓下 swiper 里使用fixed等于absolute

---

1. 情况描述
   -- 项目里使用到了swiper来做列表切换，然后列表中需要根据键盘高度弹起input
   -- 正常来说，使用fixed布局，input框的位移 = 键盘高度 - input框高度
   -- 但在安卓下，还需要减去scrollTopscrollTop，因为fixed布局失效了
   

2. 出现机型
   安卓

3. 解决办法 - 小程序提供的platform信息
   开发者可以根据platform分为3套公式
   

   • 思路：
     • IOS：键盘高度 - input框高度
       
     • 安卓：键盘高度 - input框高度 - scrollTop
     • devtools: 0

scroll在数据少时无法下拉

---

1. 情况描述
   页面数据量少，元素高度无法撑开父元素，就无法进行下拉刷新
2. 出现机型
   都有
3. 解决办法
   给数据展示项外面包一层view，view的高度设置为101%，这样就可以下拉刷新
   当然有同学会说~这样在数据少时出现滚动会很奇怪
   所以可以设置隐藏滚动条的样式

微信7.0以下不支持自定义导航栏

---

1. 情况描述
   当设置了自定义的导航栏时，在低版本微信会显示两条导航栏
2. 出现机型
   微信7.0以下
3. 解决办法
   判断微信浏览器版本 低于7.0版本不支持自定义导航栏
   wx.getSystemInfoSync().version.charAt(0)) >= 7