基于uniapp 的微信小程序开发之自定义tabbar栏方案

411 阅读2分钟

对于直接在pages.json中配置的tabbar已经不能满足多元化的需求了,特别是对于多个角色对应多套样式的问题上面就显得很无力了,在这里我就分享下我自己在解决这个问题中采取的方案,首先组件库的话采用的是Uview,这里tabbar用的是组件库中的U-tabbar组件,首先使用自定义tabbar的话要将pages.json中自带的tabbar配置项全部注释掉,然后页面注册的话按正常注册,我这里单独封装了一个tabbar组件 ,如下:

image.png 然后搭建好页面结构,另外建一个tabbar.js 的文件,里面用于存放类似于原生tabbar配置项,例如:

image.png 这里只是一套tabbr样式,可以配置多套,依次就行,然后将tabbar.js引入到tabbar组件页面中,进行处理一下,这样就将tabbar做成动态的了,然后可以在mounted里面进行角色的判断,进而判断使用哪一套样式 下面就可以另起一个index页面了,这个页面在pages.json中需要放在第一个显示页面的位置上,使一进页面第一个看见的页面就是index页面了,然后将tabbar组件和需要跳转显示的页面全部引入到idnex页面就可以了,这里跳转实现的话,我是通过在tabbar组件内的tabbar组件有一个跳转切换方法change来获取当前点击的是第几个tabbar栏,如下:

image.png 然后将当前点击返回来的索引值通过子传父的方法传递给index页面,然后在index页面中就通过这个传过来的索引值来判断点击第几个tabbar显示第几个页面就可以了,类似于这样:

image.png 然后这里实现之后会存在一个问题,这时候顶部的navigationBarTitleText的配置项可能会失效,不会显示出来,这里可以通过在index页面中直接加一个u-navbar即可,然后还是通过传递过来的当前点击的索引项来动态控制显示的文字信息,到这里基本上就剩下一些小的样式冲突问题微调一下就可以了。