uniapp里自定义底部导航demo效果（整理）

1、效果图：

2、先在components里创建一个tabbar.vue

具体文件代码：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)"><view class="column-me row-center" v-if="current == index"><image class="item-img" :src="item.iconPath" :class="{'cenImg' : index == 2}"></image><view class="text-item-x">{{item.text}}</view></view><view class="column-me row-center" v-else><image class="item-img1" :src="item.icon" :class="{'cenImg' : index == 2}"></image><view class="text-item-n">{{item.text}}</view></view></view></view>
</template><script>export default {props: {current: String},data() {return {paddingBottomHeight: 0, //苹果X以上手机底部适配高度list: [{text: '首页',icon: '../static/navImg/btn_home_n.png', //未选中图标iconPath: '../static/navImg/btn_home_s.png', //选中图片path: "/pages/index/index", //页面路径},{text: '处方',icon: '../static/navImg/btn_chufang_n.png', //未选中图标iconPath: '../static/navImg/btn_chufang_s.png', //选中图片path: "/pages/index/recipe", //页面路径},{text: '快速接诊',icon: '../static/navImg/btn_mess_n.png', //未选中图标iconPath: '../static/navImg/btn_mess_n.png', //选中图片path: "/pages/index/reception", //页面路径},{text: '消息',icon: '../static/navImg/btn_mess_s_n.png', //未选中图标iconPath: '../static/navImg/btn_mess_s.png', //选中图片path: "/pages/index/message", //页面路径},{text: '我的',icon: '../static/navImg/btn_me_n.png', //未选中图标iconPath: '../static/navImg/btn_me_s.png', //选中图片path: "/pages/index/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// })console.log(path, 'pathpath')this.$.open_tab(path)}}};
</script><style scoped>.tabbarActive {color: #79D5AD !important;}.tabbar {position: fixed;bottom: 0rpx;left: 0rpx;right: 0rpx;display: flex;justify-content: space-around;align-items: center;width: 100%;height: 100rpx;background-color: #fff;/* z-index: 99; */}.tabbar-item {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100rpx;font-size: 20rpx;}.column-me {display: flex;flex-direction: column;}.row-center {align-items: center;}.text-item-x {color: #215AA0;}.text-item-n {color: #6D7984;}/* 选中后 */.item-img {width: 50rpx;height: 50rpx;}/* 选中前 */.item-img1 {width: 50rpx;height: 50rpx;}/* 中间图片高度 */.cenImg {width: 88rpx !important;height: 88rpx !important;margin-top: -34rpx;}
</style>

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

4.在要使用的底部导航页面引用 …/…/components/tabbar.vue。
具体代码

<template><view><!-- :current="'0'"  第一个选中 --><Tabbar :current="'0'"></Tabbar></view>
</template><script>import Tabbar from '@/components/tabbar.vue'export default {components: {Tabbar}, onShow() {uni.hideTabBar({animation: false})},}
</script>

uniapp里自定义底部导航demo效果（整理）相关推荐

uniapp里自定义底部导航
1.来先看效果图: 2.在uniapp里tabbar不能完全满足客户需求,所以这就需要开发者自定义封装一个底部导航组件. 3.先在components里创建一个tabbar.vue 具体代码: < ...
uniapp 底部菜单_uni-app 自定义底部导航栏的实现
这是我目前发现较好的uni-app 自定义底部导航栏方法,其他方法的缺点主要是在切换时,要么会闪烁,要么会每点击一下,都会请求一次数据.如果有其他更好的方法,欢迎评论留言,最近才开始用uni-app写 ...
uniapp 底部菜单_利用uni-app怎么对底部导航栏进行自定义
利用uni-app怎么对底部导航栏进行自定义发布时间:2020-12-14 15:15:03 来源:亿速云阅读:78 利用uni-app怎么对底部导航栏进行自定义?相信很多没有经验的人对此束手无策 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
小程序自定义底部导航 custom-tab-bar
前言: 在开发小程序过程中,如果你需要根据不同用户角色显示不同底部导航:或者导航样式需要个性化设计.此时就需要用到自定义底部导航 custom-tab-bar. 具体操作: 1.根目录下创建custo ...
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题，适配ihone x，ihone 11 和12的机型
自定义底部导航条刘海机型屏幕出现黑色横条遮挡问题,适配ihone x,ihone 11 和12的机型修改前情况修改后情况打开项目文件 app.vueapp.vue1.增加全局参数 globalD ...
微信小程序自定义底部导航栏遮挡页面内容（已解决）
今天也是努力写毕设的一天~ 这几天在实现旅行日记的笔记详情界面,先实现了自定义的底部导航栏,在这里我使用的是iView Weapp,具体的介绍我放在这里了~ 快速上手 iView Weapp 跟着里面 ...
3分钟教你实现仿微信底部导航栏效果（BottomNavigationView + ViewPager）
文章目录实现效果图前言 XML布局 menu文件 ViewPager的使用 PagerAdapter(Java) Activity中实现上下联动侧滑带动按钮选择点击底部按钮带动页面自定义选 ...
vue2.0实现底部导航切换效果
使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...

uniapp里自定义底部导航demo效果（整理）

uniapp里自定义底部导航demo效果（整理）相关推荐

最新文章

热门文章