uni-app 自定义底部导航栏的实现


Posted in Javascript onDecember 11, 2020

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

1. tabbar 组件

<template>
 <view class="tabbar-container">
  <view
   :style="{ color: currentIndex == index ? '#007EFF' : '#333333' }"
   v-for="(item, index) in tabbarList"
   :key="index"
   style="flex: 1"
   @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 :style="'height: calc(100vh - ' + tabbarHeight + 'px)'">
  <tab-bar
   :currentIndex="currentIndex"
   class="tabbar-container"
   @getCurrentIndex="getCurrentIndex"
  />
  <swiper duration="0" disable-touch :current="currentIndex" style="height: 100%">
   <swiper-item>
    <scroll-view scroll-y style="height: 100%">
     <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 自定义底部导航栏的实现的文章就介绍到这了,更多相关uni-app 底部导航栏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
学习jQuey中的return false
Dec 18 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
JavaScript模拟push
Mar 06 Javascript
jQuery 选择器(61种)整理总结
Sep 26 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
Dec 08 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
Vue实现附件上传功能
May 28 Javascript
微信小程序实现音乐播放页面布局
Dec 11 #Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 #Javascript
JS实现京东商品分类侧边栏
Dec 11 #Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 #Vue.js
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 #Vue.js
一行JavaScript代码如何实现瀑布流布局
Dec 11 #Javascript
react中hook介绍以及使用教程
Dec 11 #Javascript
You might like
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
javascript两段代码,两个小技巧
2010/02/04 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
html超链接打开窗口大小的方法
2013/03/05 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
一次围绕setTimeout的前端面试经验分享
2017/06/15 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
2020/02/12 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
详解python中递归函数
2019/04/16 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
资深财务管理人员自我评价
2013/09/22 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
企业文化标语口号
2014/06/09 职场文书
关于开学的感想
2015/08/10 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
Redis读写分离搭建的完整步骤
2021/09/14 Redis