taro-vue小程序开发记录四【添加底部导航栏，并封装成组件】

一、内容：添加底部导航栏，并封装成组件

二、效果

 

 

 三、代码

　　botBar.vue组件

　　

<template>
  <view>
   
    <AtTabBar
      fixed
      :tabList="tabList1"
      :onClick="handleClick"
      :current="current"
    />
  </view>
</template>
<script>
import Taro, { Component } from '@tarojs/taro'
import { AtTabBar } from 'taro-ui-vue'


export default {
  name: 'botBar',
  components: {
    AtTabBar
  },
  props:{
            current:{//
                type:Number,
                default:function(){
                    return 0
                }
            },
  },
   data () {
    return {           
      tabList1: [
        { title: '首页', iconType: 'home' },
        { title: '消息', iconType: 'mail', text: 'new' },
        { title: '我的', iconType: 'user' }
      ],
    }},    
    methods: {
      handleClick(value) {
      
      switch(value)
      {
        case 0:
              Taro.navigateTo({url:'/pages/home/index'})
              break;
        case 1:
              break;
        case 2:
              Taro.navigateTo({url:'/pages/user/index'})
              break;
        
      }
    }
    }
}
</script>

页面使用：

<template>
<view>

<botBar :current=0></botBar>

</view>
</template>

<script>
import Taro, { Component } from '@tarojs/taro'
import { AtForm, AtInput, AtButton,AtSwitch } from 'taro-ui-vue'
import botBar from '../../components/botBar'
import './index.scss'

export default {
name: 'user',
components: {
botBar
},

}