uniapp里自定义底部导航

1.来先看效果图：

2.在uniapp里tabbar不能完全满足客户需求，所以这就需要开发者自定义封装一个底部导航组件。

3.先在components里创建一个tabbar.vue

具体代码：

<template><!-- 底部导航 --><view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}"><view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)"><image class="item-img" :src="item.iconPath" v-if="current == index"></image><image class="item-img1" :src="item.icon" v-else></image></view></view>
</template><script>export default {props: {current: String},data() {return {paddingBottomHeight: 0, //苹果X以上手机底部适配高度list: [{text: '', //首页icon: '/static/tabbar/index.png', //未选中图标iconPath: '/static/tabbar/indexSelected.png', //选中图片path: "/pages/index/index/index", //页面路径},{text: '', //喜欢icon: '/static/tabbar/like.png',iconPath: '/static/tabbar/likeSelected.png',path: "/pages/like/like/like",},{text: '', //通知icon: '/static/tabbar/notice.png',iconPath: '/static/tabbar/noticeSelected.png',path: '/pages/notice/notice/notice',},{text: '', //我的icon: '/static/tabbar/my.png',iconPath: '/static/tabbar/mySelected.png',path: "/pages/my/my/my",}]};},created() {let that = this;uni.getSystemInfo({success: function(res) {let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];model.forEach(item => {//适配iphoneX以上的底部，给tabbar一定高度的padding-bottomif (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {that.paddingBottomHeight = 40;}})}});},watch: {},methods: {tabbarChange(path) {uni.switchTab({url: path})}}};
</script><style scoped>.tabbarActive {color: #79D5AD !important;}.tabbar {position: fixed;bottom: 48rpx;left: 45rpx;right: 30rpx;display: flex;justify-content: space-around;align-items: center;width: 600rpx;height: 126rpx;border-radius: 100rpx;background-color: #F5F6F7;padding: 0 30rpx;z-index: 99;}.tabbar-item {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100rpx;}/* 选中后 */.item-img {width: 104rpx;height: 104rpx;border-radius: 50%;box-shadow: 0rpx 0rpx 10rpx 10rpx #EEEFF0;}/* 选中前 */.item-img1 {width: 50rpx;height: 50rpx;}</style>

4. 重要的一步，在引用tabbar之前，先到pages.json里配置一下tabbar的基本路径，只需要路径就行

5.在要使用的底部导航页面引用 ../../components/tabbar.vue。

再看具体代码：

<template><view><Tabbar :current="'2'"></Tabbar></view>
</template><script>import Tabbar from '@/components/tabbar.vue'export default {components: {Tabbar}, onShow() {uni.hideTabBar({animation: false})},}
</script>

注意：这里有个坑，<Tabbar :current="'2'"></Tabbar>

uniapp里自定义底部导航相关推荐

uniapp里自定义底部导航demo效果（整理）
1.效果图: 2.先在components里创建一个tabbar.vue 具体文件代码:tabbar.vue <template><view c ...
uniapp 底部菜单_uni-app 自定义底部导航栏的实现
这是我目前发现较好的uni-app 自定义底部导航栏方法,其他方法的缺点主要是在切换时,要么会闪烁,要么会每点击一下,都会请求一次数据.如果有其他更好的方法,欢迎评论留言,最近才开始用uni-app写 ...
uniapp 底部菜单_利用uni-app怎么对底部导航栏进行自定义
利用uni-app怎么对底部导航栏进行自定义发布时间:2020-12-14 15:15:03 来源:亿速云阅读:78 利用uni-app怎么对底部导航栏进行自定义?相信很多没有经验的人对此束手无策 ...
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题,适配ihone x,ihone 11 和12的机型修改前情况修改后情况打开项目文件 app.vueapp.vue1.增加全局参数 globalD ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
小程序自定义底部导航 custom-tab-bar
前言: 在开发小程序过程中,如果你需要根据不同用户角色显示不同底部导航:或者导航样式需要个性化设计.此时就需要用到自定义底部导航 custom-tab-bar. 具体操作: 1.根目录下创建custo ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
Android 自定义底部导航栏消息显示
转载请标明出处: http://blog.csdn.net/tyzlmjj/article/details/47186249 本文出自:[M家杰的博客] 概述底部导航栏的做法多种多样,这次主要用到了 ...
自定义底部导航栏图标
底部导航栏我门一般的实现方式就是 RadioGroup 和RadioButton这种组合.但是这样会有很多弊端.比如有个消息提示.比如要随时改变图标 /*** Created by sdx on 20 ...

uniapp里自定义底部导航

uniapp里自定义底部导航相关推荐

最新文章

热门文章