温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

利用uni-app怎么对底部导航栏进行自定义

发布时间:2020-12-14 15:15:03 来源:亿速云 阅读:1563 作者:Leah 栏目:开发技术

利用uni-app怎么对底部导航栏进行自定义?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1. tabbar 组件

<template>
 <view class="tabbar-container">
  <view
   :
   v-for="(item, index) in tabbarList"
   :key="index"
   
   @click="switchTab(index)"
  >
   <view :class="'iconfont ' + item.icon" />
   <view class="title">{{ item.title }}</view>
  </view>
 </view>
</template>

mounted(){
 let dom = uni.createSelectorQuery().select('.tabbar-container')
  dom.boundingClientRect(e => {
   // tabbarHeight使用频次较高,就设为全局变量了
    getApp().globalData.tabbarHeight = e.height
  }).exec()
}

<style scoped lang="scss">
.iconfont {
 font-size: 18px;
}

.tabbar-container {
 display: flex;
 justify-content: space-evenly;
 text-align: center;
 padding: 10px 0;
 background-color: #fff;
 box-shadow: 0 -1.5px 3px #eee;
 z-index: 999;

 .title {
  font-size: 12px;
 }
}
</style>

2. 引入

这里使用的是swiper,duration为0是为了关闭页面切换动画效果,

<template>
 <view :>
  <tab-bar
   :currentIndex="currentIndex"
   class="tabbar-container"
   @getCurrentIndex="getCurrentIndex"
  />
  <swiper duration="0" disable-touch :current="currentIndex" >
   <swiper-item>
    <scroll-view scroll-y >
     <home />
    </scroll-view>
   </swiper-item>
   <swiper-item>
    <todo-page />
   </swiper-item>
   <swiper-item>
    <launch-task />
   </swiper-item>
   <swiper-item>
    <my-page />
   </swiper-item>
  </swiper>
 </view>
</template>

mounted() {
 this.tabbarHeight = getApp().globalData.tabbarHeight
},

getCurrentIndex(e) {
 this.currentIndex = e;
}

看完上述内容,你们掌握利用uni-app怎么对底部导航栏进行自定义的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI