uni-app
的easycom
机制。传统vue项目开发,引用组件需要导入 - 注册 - 使用
三个步骤。而uni-app
的easycom
机制,将组件引用进一步优化,开发者只管使用,无需考虑导入和注册。
组件命名规则为“my-component”,通过“-”连接的方式命名。
配置pages.json文件,确定tabbar页面
首先需要在根目录下的pages.json文件中配置tabbar属性,配置你的底部tabbar页面。
在属性tabBar下面配置list数组,数组中只需要配置pagePath和text即可,其他内容自定义就行。
注意:有几个tabbar页面就配置几个,否则会报错。以下面两个为例。
// pages.json "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/my/my", "text": "我的" }] },
创建tabbar组件
在项目根目录下创建components文件夹,然后在该文件下面创建同名目录的组件tab-bar,即文件夹名字为tab-bar,文件名字为tab-bar.vue。
// tab-bar.vue <template> <view> <u-tabbar @change="changeTab" :value="tabIndex" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" activeColor="#09C272" inactiveColor="#7d7e80"> <u-tabbar-item :text="item.text" :name="item.name" icon="home" v-for="item in tabList" v-bind:key="item.name" @click="tabClick(item.path)"> </u-tabbar-item> </u-tabbar> </view> </template> <script> export default { name: 'tabbar', props: { tabIndex: { type: Number, default: 0 } }, data() { return { tabList: [ { text: '首页', name: 0, icon: 'home', path: '/pages/index/index' }, { text: '我的', name: 1, icon: 'account', path: '/pages/my/my' } ] }; }, methods: { changeTab(e) {}, tabClick(path) { // console.log(e); uni.switchTab({ url: path }); } } }; </script>
上面代码为完成的配合uView框架的Tabbar 底部导航栏组件来完成的自定义文件。其中props属性中的tabIndex字段为当前选中的索引,通过tabbar主页面传递过来的索引,来选中当前标签。主要用来解决自定义组件跳转时不能及时选中组件的bug。
自定义组件中的其他参数属性,可转移uView官网详情了解,这里不做过多赘述。
然后就是在tabbar页面引入自定义的tabbar组件。本案例中实在pages/index/index和pages/my/my文件中引入tabbar组件。以index.vue为例。直接引入”<tab-bar :tabIndex=”0″></tab-bar>“组件即可,然后传入当前页面索引值即可,简单明了。
// pages/index/index <template> <tab-bar :tabIndex="0"></tab-bar> </template>
这个时候打开你会发现,自定义导航完美适配,而且比原生导航好看很多。
避免的小bug
当你引入自定义tabbar导航的时候,第一次加载进去你会发现原生导航会覆盖自定的导航。所以当页面启动的时候,隐藏到原生导航即可。
// App.vue <script> export default { onLaunch: function () { console.log('App Launch'); uni.hideTabBar(); } }; </script>