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各部相关,哈哈哈哈哈哈~~~~~~~~~~~

相关内容

热门资讯

韩国特检组向法院申请拘留前总统... 转自:中安在线总台记者获悉,当地时间6日下午,韩国内乱特检组以妨碍公务、伪造公文等嫌疑要求法院拘留前...
杜锋:在全运舞台续写广东篮球辉... 编者按:第十五届全国运动会将于2025年11月在粤港澳三地举行。这是一场体育盛会,更是推动全民健身、...
​任刚到莱西市调研时强调:坚持... 青岛日报社/观海新闻7月6日讯  5日,市委副书记、市长任刚率市直有关部门负责同志到莱西市调研。他强...
景县总工会创新就业服务模式,让... 转自:河工新闻网  河工新闻网讯(记者李昊男 通讯员葛志强)“能带我们看看车间里面是什么样吗?”“大...
韩媒:韩国内乱独检组提请法院对... 中新网7月6日电 据韩联社报道,当地时间6日,韩国内乱独检组提请法院对前总统尹锡悦签发逮捕令。资料图...
纳尔股份92万股限制性股票7月... 7月6日,纳尔股份(002825)发布公告,近日完成了2025年限制性股票激励计划的首次授予登记工作...
重获“心”生的青海小球迷如愿来... 转自:交汇点新闻 交汇点讯 “我爱江苏,南哥加油!”7月...
月入2万的10个小生意(县城创... 当今社会,各行业竞争激烈。没钱赚很多钱不容易。有很多在高层工作的白领,看起来光彩照人,但实际上只是工...
南京一小区业委会花近千万维修金... 据荔枝新闻7月6日报道,此前,南京的某小区因年久失修,高层消防系统无法正常使用,业委会动用维修基金5...
年报难产,停牌两个月,A股百亿... 每经编辑|黄胜     7月6日晚间,天茂集团(000627.SZ,股价2.74元...