从接到开发小程序的任务开始，给了一周左右的学习时间，然后直接上手一个商城项目，说实话，踩坑的过程是痛苦的。因为小程序的api太多了，在时间有限的情况下，不可能全部看一遍。好在找到了几个比较好的demo（但是作为demo，功能都比较单一，难以形成知识体系），少走了很多的弯路。这里把踩过的坑记录一下。

 

1、scroll-view里面的内容并未填满高度，却可以滚动

原因分析：当 scroll-view 组件的第一个直接子元素设置了margin-top 时即使 scroll-view 只有一行也会滚动，当使用条件判断渲染时需特别注意。

解决办法：确保scroll-view 组件的第一个直接子元素没有margin-top，如果有样式，用style的方式方式覆盖掉，改为padding-top。其他复杂情况可考虑改变标签层级结构，如在 scroll-view 组件和第一个子元素之间添加一个高度固定的空白元素。

 

2、页面跳转失败

原因分析：

1、小程序的路由是以堆栈形式控制的，为了页面跳转可控，小程序文档明确规定，页面跳转不能超过5层，否则失效。这句话的意思是，你不能连续超过5次使用navigatorTo。

2、tabBar页面只能通过switchTab跳转，其他方式无法跳转。

解决办法：

1、对于某些业务单一，和其他页面没有太大关系的页面，比如商城的支付页，地址管理页，登录页等，使用redirectTo跳转。一句话就是，避免连续5次使用navigatorTo。

2、注意页面跳转方式。

 

3、页面传参失败

原因分析：tabBar的页面跳转是不能传参的。

解决办法：如果确实想给tabBar页面传参，可以使用缓存sessionStorage或localSorage，也可以考虑使用小程序的globalData。

这里说句题外话，小程序的tabBar页面不让传参是有一定道理的，因为tabBar页面一旦打开过一次，就保存了，再次打开不会触发onLoad事件，你通过url传的参自然也获取不到。还有就是，tabBar最初的设计，就是不接受参数的，这样做自然有这样做的道理，如果不是不得已，最好别给tabBar页面传参，因为你得在onShow的生命周期处理参数，代码逻辑啰嗦且麻烦。

 

4、页面懒加载出现抖动

这个问题我遇到过，但莫名其妙的解决了，所以具体原因也不是很清楚，说一下我的情况供大家参考。我接手的是别人做好的项目，进行二次维护，当时有个商品分类页面是做的懒加载，就有抖动。他之前的实现方法是，在一个scroll-view里面，有多少个分类就放了多少个view，根据选择的分类展示对应的view，类似于tab。然后每个分类的view里面的数据，是根据scroll-view的滚动进行懒加载的，还在scroll-view上绑定了一个监听滚动的事件。后来我直接把所有scroll-view里的所有view全部删除了，只留下一个，根据分类id请求数据填充，发现他监听的滚动事件也没做什么事，所以也直接就干掉了，我觉得关键的就是这两步把。其他还做了一些用户体验方面的改动，就这样过后，抖动的情况居然莫名奇妙的就消失了，我也很费解。