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 相关文章推荐
Prototype ObjectRange对象学习
Jul 19 Javascript
动态表格Table类的实现
Aug 26 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
Dom在ajax技术中的作用说明
Oct 25 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
javascript继承机制实例详解
Nov 20 Javascript
使用Node.js给图片加水印的方法
Nov 15 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 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
第十三节--对象串行化
2006/11/16 PHP
php中计算时间差的几种方法
2009/12/31 PHP
php无限遍历文件夹示例分享
2014/03/04 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
Paypal实现循环扣款(订阅)功能
2017/03/23 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
点击标签切换和自动切换DIV选项卡
2014/08/10 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue 实现数字滚动增加效果的实例代码
2018/07/06 Javascript
jquery html添加元素/删除元素操作实例详解
2020/05/20 jQuery
js利用iframe实现选项卡效果
2020/08/09 Javascript
[48:21]林俊杰圣堂刺客超神杀戮秀
2014/10/29 DOTA
编程语言Python的发展史
2014/09/26 Python
实践Vim配置python开发环境
2018/07/02 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
优秀毕业生求职推荐信范文
2013/11/21 职场文书
师范生个人推荐信
2013/11/29 职场文书
空气环保标语
2014/06/12 职场文书
体育馆的标语
2014/06/24 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
学子宴致辞大全
2015/07/27 职场文书
车间班组长竞聘书
2015/09/15 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
Python time库的时间时钟处理
2021/05/02 Python
mysql事务隔离级别详情
2021/10/24 MySQL