位置: 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)对高性能图形应用程序进行访问(弗吉尼亚理工大学美国排名)

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

  • 工资表怎么导入个税系统计算个税
  • 小规模合作社免税吗
  • 个人生产经营所得税
  • 纳税调整减少额是什么意思
  • 转账支票的签发
  • 物流辅助服务属于什么费用
  • 调整上月的生产成本
  • 金税盘技术维护费账务处理
  • 注销时其他应付款余额怎么账务处理
  • 以物易物方式销售货物例题
  • 资产减值损失是
  • 非正常损失允许税前扣除吗
  • 行政机关作出下列行为属于行政复议的范围
  • 房地产母公司将其土地变更到其全资子公司
  • 企业如果亏损应该计提缴纳所得税吗
  • 为员工买的商业险是否能税前扣除
  • 政府减免税款如何做账
  • 累计折旧要结转到本年利润吗
  • 境外企业在境外提供劳务
  • 本月做账下月认证的进项怎么做账?
  • 无需付款的其他应付款怎么做凭证?
  • 软件外包付款流程
  • 超过五年的未弥补亏损怎么处理?
  • 设置戴尔笔记本锁屏时间
  • 房地产企业收取的诚意金
  • 以前年度的其他应付款不用付怎么处理
  • 出口退税会计分录例题
  • nw.exe是什么进程
  • layui表格编辑功能
  • 资产处置损益计税基础是什么
  • nyu数据集
  • 前端段落空两格怎么设置
  • yolov5超参数进化
  • 增值税申报时,里面没有数据怎么办
  • 金融企业呆账核销管理办法
  • php模板教程
  • 特定业务计算的应纳税所得额是指
  • uni-swiper-dot
  • 什么是加计扣除政策
  • php 银行卡支付
  • jquery设置不可用
  • 待抵扣进项税额是什么情况下用的
  • 购买商品发生的费用计入
  • 购进原材料用于生产免税产品
  • 个税申报的本期收入是应发工资吗
  • 企业财政拨款所得免税吗
  • 帝国cms自动推送插件
  • 特殊银行账户上限
  • 长期股权投资会计准则2021修订
  • 有关预收款的说法
  • 未达起征点免税额怎么计算
  • 待抵扣进项税额和待认证进项税额的区别
  • 暂估入库没有票怎么冲掉
  • 注册资本认缴与注册登记实操
  • 生产企业购进的生产原材料用来装修公司会计处理
  • 商业企业库存商品成本核算
  • 办公室购买电脑属于什么费用
  • 预付账款转营业外支出
  • 售后回租含手续费吗
  • 国库单一账户体系包括哪些账户
  • ubuntu16.04.1下 mysql安装和卸载图文教程
  • auepuc.exe是什么软件
  • winXP运行内存查看
  • windows server 2016 域控
  • win7家庭版开启administrator
  • win8系统如何查看电脑mac物理地址
  • win10周年更新版是什么意思
  • linux指令系统
  • Win10无法获取ipv4
  • jquery密码验证
  • linux什么是二进制文件
  • jquery实现回到顶部
  • linux中的tree
  • jq获取form表单数据
  • python的垃圾处理机制
  • 浅谈如何加强基层党组织建设
  • 国家审计署查民营企业
  • 如何查询车辆购置税
  • 广东省税务总局官网
  • 个人所得税申报是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设