pc端控制渲染小程序之自定义tabBar
创始人
2024-03-26 16:13:07
0

需求是这样的:底部的tabBar可以跳转任意页面。

刚开始接到这样的需求,我很难受,原因是:

1.底部导航栏规定了最多5个主页面,可以通过wx.switchTab()进行跳转。
2.规定的主页面还需要在app.json中定义好

这样是不能实现底部tabBar跳转任意页面的。

因此经过时间研究后,得到结果:

自己自定义tabBar组件,不用微信小程序自定义的tabBar组件,然后再需要应该应用的主页面上添加tabBar组件。

//跳转方法
export const jump = function (target,tabSource = false) {console.log("跳转",target)if (!target) returnlet { name, type, id,path,param } = target.jumpswitch (type) {case 'fixed': // 固定页面name = name ? name : typebreakcase 'custom': // 自定义页面是否已配置首页或Tab页,如果已配置则对应跳转let targets = findTab(id)console.log("跳转name",targets)name = targets ? targets.jump.name : target.jump.typebreak}// 储存当前跳转信息// wx.setStorageSync('jump', { name, type, id })console.log("跳转name",name)switch (name) {case 'home':wx.switchTab({url: '/pages/home/page'})breakcase 'customize_one':wx.switchTab({url: '/pages/customize_one/page'})breakcase 'customize_two':wx.switchTab({url: '/pages/customize_two/page'})breakcase 'customize_three':wx.switchTab({url: '/pages/customize_three/page'})breakcase 'customize_four':wx.switchTab({url: '/pages/customize_four/page'})break//自定义页面case 'custom':wx.navigateTo({url: `/subPackages/custom/index?pageId=${id}&&tabSource=${tabSource}`})break//固定页面case 'fixed':wx.navigateTo({url: path,success: function (res) {res.eventChannel.emit('acceptData', {param: param,tabSource:tabSource})},fail(res){console.log("跳转错误",res)console.log("跳转路径报错",path)}})break;}
}

和后台进行探讨后,把页面分成2种:固定页面和自定义页面。
固定页面就是跳转到完全写好的页面
自定义页面是通过pc端控制拖拽得到的页面。
我把固定页面的路径存入了数据库,自定义页面的路径前端控制。
至于app.json中定义的导航list,我全部放了自定义页面,定义了5个自定义主页面

因此如果底部导航栏是需要跳转固定页面,就用wx.navigateTo,如果是跳转自定义页面,就用wx.switchTab.虽然这样有个问题,就是跳转固定页面时候,导航栏会带返回按钮,但是可以通过自定义导航栏实现是否需要返回按钮。

//这个方法是底部导航栏高亮显示的方法,在attached中进行调用
onClickTabBar: function () {let that = this;let length = getCurrentPages().lengthlet pagePath = getCurrentPages()[length - 1].route;that.data.list.forEach((item, i) => {if (item.jump.path === `/${pagePath}`) {that.setData({selected: i})}})}

这样就解决了,相当于在每个主页面中引入了一个底部组件,每个页面中的底部tabBar各部相关,哈哈哈哈哈哈~~~~~~~~~~~

相关内容

热门资讯

求经典台词和经典旁白 求经典台词和经典旁白谁有霹雳布袋戏里的经典对白和经典旁白啊?朋友,你尝过失去的滋味吗? 很多人在即将...
小王子第二章主要内容概括 小王子第二章主要内容概括小王子第二章主要内容概括小王子第二章主要内容概括
爱情睡醒了第15集里刘小贝和项... 爱情睡醒了第15集里刘小贝和项天骐跳舞时唱的那首歌是什么谢谢开始找舞伴的时候是林俊杰的《背对背拥抱》...
世界是什么?世界是什么概念?可... 世界是什么?世界是什么概念?可以干什么?物质的和意识的 除了我们生活的地方 比方说山 河 公路 ...
全职猎人中小杰和奇牙拿一集被抓 全职猎人中小杰和奇牙拿一集被抓动画片是第五十九集,五十八集被发现,五十九被带回基地,六十逃走
“不周山”意思是什么 “不周山”意思是什么快快快快......一座山,神话里被共工撞倒了。
《揭秘》一元一分15张跑得快群... 一元一分麻将群加群主微【ab120590】【tj525555】 【mj120590】等风也等你。喜欢...
玩家必看手机正规红中麻将群@2... 好运连连,全网推荐:(ab120590)(mj120590)【tj525555】-Q号:(QQ443...
始作俑者15张跑的快群@24小... 微信一元麻将群群主微【ab120590】 【tj525555】【mj120590】一元一分群内结算,...
《重大通知》24小时一元红中麻... 加V【ab120590】【tj525555】【mj120590】红中癞子、跑得快,等等,加不上微信就...
盘点一下正规一块红中麻将群@2... 一元一分麻将群加群主微:微【ab120590】 【mj120590】【tj525555】喜欢手机上打...
(免押金)上下分一元一分麻将群... 微【ab120590】 【mj120590】【tj525555】专业麻将群三年房费全网最低,APP苹...
[解读]正规红中麻将跑的快@群... 微信一元麻将群群主微【ab120590】 【tj525555】【mj120590】一元一分群内结算,...
《普及一下》全天24小时红中... 微【ab120590】 【mj120590】【tj525555】专业麻将群三年房费全网最低,APP苹...
优酷视频一元一分正规红中麻将... 好运连连,全网推荐:(ab120590)(mj120590)【tj525555】-Q号:(QQ443...
《火爆》加入附近红中麻将群@(... 群主微【ab120590】 【mj120590】【tj525555】免带押进群,群内跑包包赔支持验证...
《字节跳动》哪里有一元一分红中... 1.进群方式-[ab120590]或者《mj120590》【tj525555】--QQ(QQ4434...
全网普及红中癞子麻将群@202... 好运连连,全网推荐:(ab120590)(mj120590)【tj525555】-Q号:(QQ443...
「独家解读」一元一分麻将群哪里... 1.进群方式《ab120590》或者《mj120590》《tj525555》--QQ(4434063...
通知24小时不熄火跑的快群@2... 1.进群方式《ab120590》或者《mj120590》《tj525555》--QQ(4434063...