..._uniapp 两套tabbar">
当前位置:   article > 正文

关于uni-app 开发  自定义2套tabbar的解决方式_uniapp 两套tabbar

uniapp 两套tabbar

关于uni-app 开发  自定义tabbar的解决方式

1、首先新建组件tabBar.vue

  1. <template name="tabBar">
  2.     <view class="tab-bar">
  3.         <block v-for="(item,index) in tabBarList.list" >
  4.             <navigator :url="item.pagePath" class="menu-item">
  5.               <text>{
  6. {item.text}}</text>
  7.             </navigator>
  8.         </block>
  9.         <view class="clear"></view>
  10.     </view>
  11. </template>
  12. <style>
  13. .menu-item{
  14.       width: 18%;
  15.       float: left;
  16.       text-align: center;
  17.       padding-top: 5px;
  18.       border: 0px solid #000000;
  19.       font-size: 14px;
  20.     }
  21.     .clear{
  22.       clear: both;
  23.     }
  24.     .tab-bar{
  25.       position: fixed;
  26.       width: 100%;
  27.       left: 0px;
  28.       bottom: 0px;
  29.       padding: 0px 14px;
  30.     }
  31. </style>

2、在APP.vue 添加如下方法

globalData: {
		
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/517516
推荐阅读
相关标签