uniapp+uView2.0自定义底部tabbar导航

在正式开始代码之前,我们首先了解一下uni-appeasycom机制。传统vue项目开发,引用组件需要导入 - 注册 - 使用三个步骤。而uni-appeasycom机制,将组件引用进一步优化,开发者只管使用,无需考虑导入和注册。

即只需要按照uni-app的easycom机制规则(根目录下创建components文件夹,components文件夹内创建组件文件夹,组件文件夹内创建和文件夹同名的vue文件)创建组件,可以在页面中直接引用组件,省去了导入注册的过程。但是需要注意的是:组件命名规则为“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页面引入自定义的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文件的onLaunch方法中使用“uni.hideTabBar()”方法,隐藏原生的底部导航即可。

 // App.vue
<script>
export default {
    onLaunch: function () {
      console.log('App Launch');
      uni.hideTabBar();
    }
};
</script>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇