开发小程序时,经常遇到的模板就是下方tabBar分不同模块进行页面展示,但官方支付宝小程序底部tabBar提供样式过于简单,还不能进行样式覆盖与编辑,如果简单的设计可以直接用官方配置(此处省略),若复杂一点的,就需要自己自定义了,通过摸索开发后总结以下方式进行自定义底部tabBar。
首先自定义tabBar后会遇到一个大家广泛遇到的问题,就是点击底部tab按钮后,页面跟着闪烁出现,这个问题出现的原因其实是因为我们把tabbar放在了每个页面里进行加载,所以每次点击相当于跳转到新页面,自然tabbar显示的方式肯定是闪烁的;
正确的搭建方式是:
将每个tab显示的内容封装成一个小程序组件,然后再定义一个小程序页面,将本页面路径设置为第一个(目的是小程序进入后首页加载),然后在本页面中自定义tabbar,并将刚封装好的组件引入到此页面,这样点击每个tab按钮就不会出现页面闪烁的问题啦;以下贴代码与效果图
项目目录
主文件
组件引用
效果图
如果遇到组件内跳转其他组件的问题,可用到子组件调用父组件方法来做,代码如下
子组件
父组件
对应调用点击tab按钮变更组件的事件即可