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 插件 人性化的消息显示
Jan 21 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
封装属于自己的JS组件
Jan 27 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
JSONP基础知识详解
Mar 19 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
详解vue移动端日期选择组件
Feb 22 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 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 类商品秒杀计时实现代码
2010/05/05 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
PHP使用内置函数file_put_contents写入文件及追加内容的方法
2015/12/07 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
基于jquery的blockui插件显示弹出层
2011/04/14 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
jQuery计算textarea中文字数(剩余个数)的小程序
2013/11/28 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
微信小程序开发(一) 微信登录流程详解
2017/01/11 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
使用jQuery实现购物车结算功能
2017/08/15 jQuery
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python 类的特殊成员解析
2018/06/20 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
师范生自荐信范文
2013/10/06 职场文书
毕业生找工作自荐书
2014/06/30 职场文书
档案工作汇报材料
2014/08/21 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
护士自荐信范文
2015/03/25 职场文书
教师岗位职责范本
2015/04/02 职场文书
签证工作证明模板
2015/06/15 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
Nginx的gzip相关介绍
2022/05/11 Servers