如何在vue中使用tabbar组件

　　介绍

这篇文章给大家介绍如何在vue中使用tabbar组件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

具体内容如下

1.应用程序。vue

& lt; !——,入口文件,——比; 　　& lt; template> 　　,& lt; div  id=癮pp"比; 　　,& lt; !——,视图层,——比; 　　,& lt; router-view> & lt;/router-view> 　　,& lt; !——,底部选项卡,——比; 　　,& lt; tabbar  @on-index-change=皁nIndexChange", v=皌abbarShow"比; 　　& lt;才能tabbar-item  selected 链接=?home"比; 　　& lt;才能img 槽=癷con", src=https://www.yisu.com/zixun/薄?资产/img/ic_tab_home_normal.png”> 　　首页 　　 　　书影音 　　 　　“2”联系 　　我的 　　 　　 　　
　　 　　 　　<脚本>//引入vux tabbar组件 　　从“vux”进口{Tabbar, TabbarItem}//引入vuex的两个方法 　　从“vuex”进口{mapGetters, mapActions} 　　 　　出口默认{ 　　名称:“应用程序”, 　　组件:{ 　　Tabbar, 　　TabbarItem 　　}, 　　数据(){ 　　返回{ 　　选择:“家” 　　} 　　},//计算属性 　　计算:mapGetters ([//从getter中获取值 　　“tabbarShow” 　　]),//监听,当路由发生变化的时候执行 　　看:{ 　　$路线(从){ 　　如果()。路=='/' | |。路==?home”| |。路径=='/有声读物' | |。==路径“/我”){/* * 　　*美元商店来自存储对象 　　*调度向行动发起请求 　　*/store.dispatch美元。(“showTabBar”); 　　其他}{ 　　store.dispatch美元。(“hideTabBar”); 　　} 　　} 　　}, 　　方法:{ 　　onIndexChange (newIndex oldIndex) { 　　控制台。日志(newIndex oldIndex); 　　} 　　} 　　}> 　　 　　

2。效果图

如何在vue中使用tabbar组件

3。其他情况

& lt; template> 　　,& lt; div 类=皐eui-tab"比; 　　,& lt; div 类=皐eui-tab__panel"比; 　　& lt;才能p  v=靶〗?100年“拷贝在{{我}}& lt;/p> 　　,& lt;/div> 　　,& lt; tabbar> 　　& lt;才能!——use  v-link——比; 　　& lt;才能tabbar-item  v-link=皗路径:& # 39;/组件/细胞# 39;}“比; 　　& lt;才能img 槽=癶ttps://www.yisu.com/zixun/icon", src=" . ./资产/演示/icon_nav_button.png "> 　　微信 　　 　　 　　 　　消息 　　 　　 　　 　　探索 　　 　　 　　 　　 新闻 　　 　　 　　
　　 　　 　　<脚本> 　　从“vux”进口{Tabbar, TabbarItem} 　　出口默认{ 　　准备好(){ 　　document.querySelector .style(身体的)。身高=?00%” 　　document.querySelector .style (“html”)。身高=?00%” 　　document.querySelector .style(“#应用程序”)。身高=?00%” 　　}, 　　组件:{ 　　Tabbar, 　　TabbarItem 　　} 　　} 　　

关于如何在vue中使用tabbar组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

如何在vue中使用tabbar组件