2018年网站开发语言,界面设计与制作就业方向,做门户网站开发的技术,wordpress 打包 转移遇到这个需求之前一直使用的小程序默认底部导航栏#xff0c;且小程序默认入口页面为pages/index/index#xff0c;要使不同角色呈现不同底部导航栏#xff0c;必须要在不同页面引用不同的自定义导航栏。本篇将结合分包#xff08;subPackages#xff09;展开以下三步叙述…遇到这个需求之前一直使用的小程序默认底部导航栏且小程序默认入口页面为pages/index/index要使不同角色呈现不同底部导航栏必须要在不同页面引用不同的自定义导航栏。本篇将结合分包subPackages展开以下三步叙述。
一、创建不同角色的页面
1、目录中创建分包personA、personB。
2、app.json补充分包配置。 二、创建不同角色的底部导航栏
1、在conponents目录下创建personA和personB的自定义导航栏组件。 2、填充导航栏内容。
!--components/tabBarA/tabBarA.wxml--
view classbottom-fixedtextA的底部导航栏/text
/view/* components/tabBarA/tabBarA.wxss */
.bottom-fixed{width: 100%;height: 200rpx; position: fixed;bottom: 0;background-color: antiquewhite;
}
!--components/tabBarB/tabBarB.wxml--
view classbottom-fixedtextB的底部导航栏/text
/view/* components/tabBarB/tabBarB.wxss */
.bottom-fixed{width: 100%;height: 200rpx;position: fixed;bottom: 0;background-color:azure;
}
三、完善页面内容
1、完善pages/index/index页面控制跳转到personA或者personB的页面。
// index.js
Page({onShow(option){wx.reLaunch({url: /personA/index/index,// url: /personB/index/index,})}
})
2、 完善personA的页面
!--personA/index/index.wxml--
textpersonA的页面/texttabBar/tabBar!--personA/index/index.json--
{usingComponents: {tabBar: /components/tabBarA/tabBarA}
}
3、完善personB的页面
!--personB/index/index.wxml--
textpersonB的页面/texttabBar/tabBar!--personB/index/index.json--
{usingComponents: {tabBar: /components/tabBarB/tabBarB}
} 完结。
