位置: IT常识 - 正文

uniapp自定义动态tabbar及全局挂载底部自定义组件(uniapp动态设置标题)

编辑:rootadmin
uniapp自定义动态tabbar及全局挂载底部自定义组件

推荐整理分享uniapp自定义动态tabbar及全局挂载底部自定义组件(uniapp动态设置标题),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp动态修改样式,uniapp动态修改tabbar,uniapp动态启动页面,uniapp动态修改样式,uniapp 动态生成页面,uniapp自定义加载动画,uniapp动态修改样式,uniapp 动态生成页面,内容如对您有帮助,希望把文章链接给更多的朋友!

本篇文章解决的问题如下:

1:uniapp在pages.json中定义的tabbar,在非tabbar页面的时候不会显示,所以自定义了一个tabbar组件。(注意是自定义组件不是官方的custom-tab-bar组件)

2:有些tabbar需要动态变化,会员登陆前和会员登陆后可能会需要在tabbar上面展示不同的项目,所以要做到动态判断

3:uniapp所有页面底部都插入同一个组件(例如版权信息,或右侧悬浮的内容),每个页面都引入一次太过麻烦,所以在main.js里面挂载一次就可以所有页面使用。

uniapp自定义动态tabbar及全局挂载底部自定义组件(uniapp动态设置标题)

一:自定义tabbar组件:(就不需要在pages.json里面再定义tabbar了)

<!-- @时间:2020-03-16 @描述:自定义底部导航栏 @使用: 在main.js全部引入: import tabBar from "@/pages/common/tabBar.vue" Vue.component('tabBar', tabBar) 在需要显示的页面底部添加: <view> <view>这里是页面内容代码区域</view>       // 其中uni-p-b-98是公共样式类名,表示padding-bottom: 98upx; 设置的98upx是和底部导航栏的高度保持一致,页面的内容就不会被底部导航遮挡住啦 <view class="uni-p-b-98"></view>       // 最后引入自定义组件,并传当前栏目对应的pagePath到自定义组件,显示当前栏目的选中样式 <tabBar :pagePath="'/pages/tabBar/home/home'"></tabBar> </view> --><template> <view class="uni-tabbar"> <view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)"> <view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view> <!-- 上面使用的是字体图标,解决切换页面的时候图标会闪的效果,毕竟每切换一个页面都会闪一下不太好看,可以切换使用下面的图片方式 --> <view v-if="false" class="uni-tabbar__bd"> <view class="uni-tabbar__icon"> <image v-if="item.pagePath == pagePath" class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.selectedIconPath"></image> <image v-else class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.iconPath"></image> </view> </view> <view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}"> {{item.text}} </view> </view> </view></template><script> export default { props: { pagePath: null }, data() { return { page: 'contact', showPage: false, containerHeight: 400, tabbar: [ { "pagePath": "/pages/tabBar/home/home", "iconPath": "/static/tabBar/home.png", "selectedIconPath": "/static/tabBar/home_col.png", "text": "首页", "fontIcon": "icon-shouye" },            // 这里是要动态切换的栏目,先隐藏,动态追加 // { // "pagePath": "/pages/tabBar/manage/manage", // "iconPath": "/static/tabBar/home.png", // "selectedIconPath": "/static/tabBar/home_col.png", // "text": "管理", // "fontIcon": "icon-guanli" // }, { "pagePath": "/pages/tabBar/person/person", "iconPath": "/static/tabBar/person.png", "selectedIconPath": "/static/tabBar/person_col.png", "text": "我的", "fontIcon": "icon-wode" } ] }; }, mounted() { // true为判断条件,根据实际的需求替换即可 if(true) { this.tabbar.splice(1,0, { "pagePath": "/pages/tabBar/manage/manage", "iconPath": "/static/tabBar/home.png", "selectedIconPath": "/static/tabBar/home_col.png", "text": "管理", "fontIcon": "icon-guanli" } ) } }, methods: { changeTab(item) { this.page = item.pagePath;          // 这里使用reLaunch关闭所有的页面,打开新的栏目页面 uni.reLaunch({ url: this.page }); }, } }</script><style lang="scss" scoped> [nvue] uni-scroll-view, [nvue] uni-swiper-item, [nvue] uni-view { flex-direction: unset; } [nvue-dir-column] uni-swiper-item, [nvue-dir-column] uni-view { flex-direction: unset; } .uni-tabbar { position: fixed; bottom: 0; z-index: 999; width: 100%; display: flex; justify-content: space-around; height: 98upx; padding: 16upx 0; box-sizing: border-box; border-top: solid 1upx #ccc; background-color: #fff; box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32); .uni-tabbar__item { display: block; line-height: 24upx; font-size: 20upx; text-align: center; } .uni-tabbar__icon { height: 42upx; line-height: 42upx; text-align: center; } .icon { display: inline-block; } .uni-tabbar__label { line-height: 24upx; font-size: 24upx; color: #999; &.active { color: #1ca6ec; } } }</style>

然后在各页面中使用组件即可

**注意修改代码中的页面路径**

**注意使用字体图标的话需要先在APP.Vue中引入iconfont.css**

<tabBar :pagePath="'/pages/list/list'"></tabBar>

 **传入的路径用于当前项目高亮**

二:全局挂载自定义组件(在main.js中)

import Vue from 'vue'Vue.prototype.baseUrl = tools.baseUrlVue.config.productionTip = falseimport tabBar from "@/components/tabbar/tabbar.vue"Vue.component('tabBar', tabBar)import Aside from "@/components/aside/aside.vue"Vue.component('Aside', Aside)

**注意要放在import Vue之后才行**

然后在各个页面中无须再import,也无须再components注册,直接<Aside></Aside>就可以用了。

本文链接地址:https://www.jiuchutong.com/zhishi/289677.html 转载请保留说明!

上一篇:弗吉尼亚理工大学利用OpenText Exceed TurboX (ETX)对高性能图形应用程序进行访问(弗吉尼亚理工大学美国排名)

下一篇:最贵的微博是什么(史上最贵的微博)

  • dnf怎么镶嵌到装备上(dnf怎么镶嵌)(地下城怎么镶嵌装备)

    dnf怎么镶嵌到装备上(dnf怎么镶嵌)(地下城怎么镶嵌装备)

  • 哈罗单车退骑行卡可以退吗(哈罗单车怎样退车)

    哈罗单车退骑行卡可以退吗(哈罗单车怎样退车)

  • 小米mix3字体怎么改(小米手机 第三方字体)

    小米mix3字体怎么改(小米手机 第三方字体)

  • 华为荣耀怎样退出talkback模式(华为荣耀怎样退出朗读模式)

    华为荣耀怎样退出talkback模式(华为荣耀怎样退出朗读模式)

  • 苹果手机排线松了有什么症状(苹果手机排线松动怎么解决自己)

    苹果手机排线松了有什么症状(苹果手机排线松动怎么解决自己)

  • 打印机打印错误是什么原因(打印机打印错误怎么解决)

    打印机打印错误是什么原因(打印机打印错误怎么解决)

  • 手机充一晚上电了,还没有充满,是什么原因(手机充一晚上电会爆炸吗)

    手机充一晚上电了,还没有充满,是什么原因(手机充一晚上电会爆炸吗)

  • excel降序排列怎么操作(excel降序排列怎么操作rank)

    excel降序排列怎么操作(excel降序排列怎么操作rank)

  • 小米10青春版防水级别(小米10青春版防水不)

    小米10青春版防水级别(小米10青春版防水不)

  • 京东闪充额度是什么(京东额度快充还能取出来吗)

    京东闪充额度是什么(京东额度快充还能取出来吗)

  • 蜂鸣器怎么才会响(蜂鸣器怎么才会发出声音)

    蜂鸣器怎么才会响(蜂鸣器怎么才会发出声音)

  • 拍立得按快门没反应(拍立得按快门没反应指示灯一直在闪)

    拍立得按快门没反应(拍立得按快门没反应指示灯一直在闪)

  • oppoa11x是否有nfc功能 (oppoa11有没有nfc这个功能)

    oppoa11x是否有nfc功能 (oppoa11有没有nfc这个功能)

  • 什么是无线网络(什么是无线网络电视)

    什么是无线网络(什么是无线网络电视)

  • 安卓怎么制作铃声(安卓制作铃声)

    安卓怎么制作铃声(安卓制作铃声)

  • 电脑筛选怎么操作(电脑筛选怎么操作excel数据)

    电脑筛选怎么操作(电脑筛选怎么操作excel数据)

  • 华为有nfc功能吗(华为p20有nfc功能吗)

    华为有nfc功能吗(华为p20有nfc功能吗)

  • 七天网怎么老是未授权(七天网络app为什么登不了)

    七天网怎么老是未授权(七天网络app为什么登不了)

  • 华为nova4音量太小怎么办(华为nova音量太小)

    华为nova4音量太小怎么办(华为nova音量太小)

  • openmv与opencv区别(opencv3和opencv4的区别)

    openmv与opencv区别(opencv3和opencv4的区别)

  • 爱奇艺我的视频怎么保存到手机(爱奇艺我的视频怎么下载)

    爱奇艺我的视频怎么保存到手机(爱奇艺我的视频怎么下载)

  • 大麦如何开通免密支付(开通大麦vip有什么用)

    大麦如何开通免密支付(开通大麦vip有什么用)

  • 华为p30微信消息不提示(华为p30微信消息怎么不提示)

    华为p30微信消息不提示(华为p30微信消息怎么不提示)

  • 华为mate20小圆点设置(华为mate20pro小圆圈)

    华为mate20小圆点设置(华为mate20pro小圆圈)

  • React报错之map() is not a function(react错误处理)

    React报错之map() is not a function(react错误处理)

  • 稳岗返还多久能到账
  • 增值税技术维护费每年都可以抵减吗?
  • 开普票需要公对公转账吗
  • 航空公司开具的个人抬头的发票可以税前扣除吗
  • 福利费属于管理费用的哪个明细
  • 2021小规模纳税人减免增值税
  • 利润表中财务费用为负数是什么意思
  • 企业的定期存款
  • 进项发票认证后暂不抵扣
  • 增值税零税率发票预缴税额
  • 业务分成方案
  • 还没入库,发票已经给财务了 怎么办
  • 出口退税代理费用大概多少
  • 企业买茶叶如何账务处理
  • 简易计税项目是所有发票都是普票吗
  • 个人投资借款长期不还要缴纳个人所得税吗?
  • 新公司不核税可以吗
  • 费用报销单与付款申请单的用处区别
  • 非居民企业怎么算企业所得税
  • 小规模企业记账软件哪个好
  • 一直零申报会怎么样
  • 收到退回增值税和附加税怎么处理
  • 华为nova9se参数详细参数
  • 权益净利率如何提高
  • Win10版本21H2卡死
  • php创建文件夹和文件
  • 慈善捐赠金额排行
  • 增值税 劳务费
  • 抵债资产账务处理程序
  • 土地使用税滞纳金不得超过
  • 企业应纳所得税计算公式
  • 进程aissca.exe
  • 最早在哪一年手机可以上网
  • PHP:imagepalettetotruecolor()的用法_GD库图像处理函数
  • 小微企业免征增值税政策2023
  • 终止cat命令
  • 盈余公积金的账务处理
  • 先开发票还是先收钱
  • 固定资产加速折旧是什么意思
  • 征地费用包括
  • 机械设备大修标准
  • mysql 连接语句
  • mongodb win7
  • 给员工发放礼品的祝福
  • 应收账款余额在借方还是贷方
  • 增值税专用发票抵扣期限
  • 进项税已认证转出账务处理
  • 权益性投资收益确认收入时间
  • 定期定额户超过9万如何交个税
  • 发票金额大于实际报销怎么做账
  • 车辆抵押贷款影响以后卖车吗
  • 交所得税的分录
  • 账户分类的作用是什么
  • 小规模应收利息怎么算
  • 减值准备包括哪几个方面
  • 11个点增值税发票是多少
  • 印花税需要计提税金及附加吗
  • 建账需要准备什么东西
  • 大数据可以在等方面发挥作用
  • sql union和join区别
  • Navicat for MySQL定时备份数据库及数据恢复详解
  • sql企业管理器在哪里
  • win10注册表主键
  • windows 专业版10安装后文件会丢失嘛
  • win7系统关机很慢什么原因
  • xp系统怎样设置无线网络连接
  • u盘pe安装win7系统
  • win10系统怎么设置不锁屏和休眠
  • centos32
  • vps可以安装虚拟机吗
  • win8系统文件
  • qat开发
  • perl \w
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • vue.js如何使用
  • U3DPlayer UnityWebPlayer动态改变src
  • unity script api
  • 基于JavaScript的网页代码
  • 长春市税务局领导
  • 公司借款给员工是否合法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设