uniapp 底部菜单_uni-app 自定义底部导航栏的实现

这是我目前发现较好的uni-app 自定义底部导航栏方法，其他方法的缺点主要是在切换时，要么会闪烁，要么会每点击一下，都会请求一次数据。如果有其他更好的方法，欢迎评论留言，最近才开始用uni-app写项目，之前只是看了下文档。

1. tabbar 组件

:style="{ color: currentIndex == index ? '#007EFF' : '#333333' }"

v-for="(item, index) in tabbarList"

:key="index"

style="flex: 1"

@click="switchTab(index)"

mounted(){

let dom = uni.createSelectorQuery().select('.tabbar-container')

dom.boundingClientRect(e => {

// tabbarHeight使用频次较高，就设为全局变量了

getApp().globalData.tabbarHeight = e.height

}).exec()

}

.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;

}

2. 引入

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

:currentIndex="currentIndex"

class="tabbar-container"

@getCurrentIndex="getCurrentIndex"

mounted() {

this.tabbarHeight = getApp().globalData.tabbarHeight

getCurrentIndex(e) {

this.currentIndex = e;

}

到此这篇关于uni-app 自定义底部导航栏的实现的文章就介绍到这了,更多相关uni-app 底部导航栏内容请搜索随便开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持随便开发网！

uniapp 底部菜单_uni-app 自定义底部导航栏的实现相关推荐

uniapp实战项目（仿知识星球App) - - 自定义顶部导航栏和登录弹窗组件
实战项目名称:仿知识星球App 技术栈:前端 => uni-app ( 后端:Node.js + Mysql + Apollo + Graphql ) 已实现功能:微信登录,创建星球,内容管理, ...
uniapp开发微信小程序自定义顶部导航栏
自定义导航栏渐变色,先上效果使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色全局定义导航栏 "windo ...
uni app 手机端导航栏自定义
uni app 手机端导航栏自定义第一步:明确顶部导航栏的构成(手机自带的顶部菜单+开发的顶部菜单栏) 获取手机自带的顶部导航栏 <view class="navigation_ba ...
小程序自定义顶部导航栏
上篇博客自定义了一个底部导航栏,效果还可以,但是我在开发过程中又遇到了一个棘手的问题.就是在底部导航栏的第一个页面需要将页面沉浸到状态栏去,这就麻烦了,因为中间的容器页面无论第几个都是在外面的主界面里 ...
微信小程序 - 自定义头部导航栏组件（详解） + iphoneX以上遮挡小黑条适配问题
1. 导航栏计算: 导航栏总高度=状态栏高度+胶囊高度+(胶囊距顶距离-胶囊高度)*2 navHeight = statusBarHeight + menuButtonObject.height + ...
react native 之自定义顶部导航栏，实现标题居中可控
本来一直用的都是RN自带的组件react-navigation,但是后面需求有变,需要顶部导航栏目的标题可以自己控制,同一页面的标题根据数据库查出来的内容变化.因此自定义了一个导航栏目,实现需求. 关 ...
使用 CSS 构建自定义粘性导航栏
导航栏可能是让用户轻松浏览您的网站而不会迷路的最佳方式. 人们通常将导航栏放在页面的最顶部,但如果它与您的设计相得益彰,您也可以在网页的任一侧放置导航栏.导航栏可以是导航项目的水平列表,也可以是小屏幕 ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
小程序自定义头部导航栏(“navigationStyle“: “custom“)，自定义tabBar
一.自定义顶部导航 1.在某些时候,不想要自带的顶部导航栏,需要自己定义,这时可以将自定义的导航栏做成一个组件,然后做一下初始配置,在每个页面引用,初始化,即可得到一个自定义的顶部导航栏: 2.代码部 ...
微信小程序实现原生导航栏和自定义头部导航栏
原生导航栏: 可以在 app.json 的 window 属性中或页面的 JSON 文件中设置 navigationBarTitleText(导航栏标题内容).navigationBarTextSty ...

uniapp 底部菜单_uni-app 自定义底部导航栏的实现

uniapp 底部菜单_uni-app 自定义底部导航栏的实现相关推荐

最新文章

热门文章