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 相关文章推荐
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
图片加载完成再执行事件的实例
Nov 16 Javascript
Vue项目分环境打包的实现步骤
Apr 02 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 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
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
js数组的操作详解
2013/03/27 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
javascript 获取模态窗口的滚动位置代码
2013/08/06 Javascript
获取非最后一列td值并将title设为该值的方法
2013/10/30 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
深入分析原生JavaScript事件
2014/12/29 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
详解vue项目首页加载速度优化
2017/10/18 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
python实现FTP服务器服务的方法
2017/04/11 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
师范应届生求职信
2013/11/15 职场文书
证婚人经典证婚词
2014/01/09 职场文书
校运会入场式解说词
2014/02/10 职场文书
优秀实习生主要事迹
2014/05/29 职场文书
党员群众路线剖析材料
2014/10/08 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python