小程序开发踩坑记录（四）——fixed元素在下拉刷新时会被遮挡且双端表现不一致问题（自制底部tabbar时会遇到的的bug）

①问题描述

微信小程序提供了官方的底部导航栏-tabbar，但项目中为满足设计要求、实现更好的效果，需要自己模拟底部导航栏。而在制作过程中就发现了问题。
自制底部导航栏的基本思路为：将自制导航元素在index页面底部使用 { display：fixed } 定位，其中的各个导航图标控制index内多个 component 的 wx:if 从而实现模拟的页面跳转（实际是在一个页面内的显示隐藏）。
如果需求只是这样，那么就能做出非常符合预期的底部导航栏，并且ios和安卓端都能完美实现模拟，万事大吉。
然而，当你需要使用下拉刷新功能，兴高采烈的打开了 index.json 中的 enablePullDownRefresh 功能时，请做好心态崩溃的准备。
ios端测试：完美。
安卓端测试：
下拉刷新前：

下拉刷新时：

可以看出，问题在于打开了下拉刷新后，下拉时整个index页面都在下移，因此fix在index的中的元素也就跟着一起下移了，但这种效果显然是不能接受的。

②问题探究

出问题就要想办法解决问题。
多方查询后，终于在小程序开发社区里找到关于这个问题的讨论。


然而，无奈的是：

嗯，我们知道这个问题了。‘
半年后：
嗯，我们知道这个问题了。

呵呵。

所以这个问题至今笔者还没有找到办法完美解决，并且据我估计暂时确实没有办法完美解决，有一个佐证：京东购物小程序，在第一栏商品页使用了下拉刷新功能，而在第三栏购物车页面，因为需要在底部fixed一个计算总价栏，下拉刷新功能是关闭的，所以我猜测是他们也没有办法解决这个问题，只能关闭下拉刷新。

也就是说，暂时，在安卓机上，fixed元素和下拉刷新功能是不兼容的。

从而只能回避这个问题：
要么，老老实实用原生tabbar；
要么，别打开下拉刷新功能；
要么，检测到用户是安卓机时，alert(‘您不配使用该小程序，请自觉关闭’);

最后，如果一定要两个功能都要，有一个可能能实现，笔者自己也正在尝试的方法：
使用scrollview模拟下拉刷新功能。

简言之：一切靠自己

友情提示：注意养发护发

有了结果再更新，如果有知道结果的或者有解决办法朋友，请狠狠@我。

----2019年4月29更新----

终于有了比较好的解决办法，鸡冻，写在了下一篇文章里，有兴趣的请出门左转上楼，或者点此传送。