微信小程序美食平台制作（美食城菜谱菜单导航切换效果微信小程序框架开发详解）

微信小程序美食平台制作（美食城菜谱菜单导航切换效果微信小程序框架开发详解）5、在tabBar对象里配置底部标签导航背景色为白色（#ffffff），文字默认颜色为灰色（#999999），选中时为红色（#CC1004），在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标、具体配置如图所示。这样就完成了仿菜谱微信小程序的底部标签导航配置，单击不同的导航，可以切换显示不同的页面，同时导航图标和导航文字会呈现为选中状态，如图所示。

美食城菜谱是围绕美食而作的一款小程序，在这里可以查看各式各样的菜谱以及制作方法。对于菜谱类App软件，用户使用的频率不高。当用户碰到不会做的菜式或者想做一些新的菜式时，才会去App软件查看，而微信小程序就可以满足这种低频使用的需要。

菜谱微信小程序的底部有5个导航标签：学做菜、头条、美食圈、消息、我的，标签导航选中时导航图和导航文字都会变为红色，如图所示。

1、新建一个无AppID的xhcp项目，如图所示。

2、将准备好的底部标签导航图标、美食轮播图片、宫格导航图标、头条美食图片复制到“pages”文件夹下。

4、在windows数组里配置窗口导航背景色（#494949），导航栏文字为“学做菜”，字体颜色为白色“#fff”，具体配置如图所示。

5、在tabBar对象里配置底部标签导航背景色为白色（#ffffff），文字默认颜色为灰色（#999999），选中时为红色（#CC1004），在list数组里配置底部标签导航对应的页面、导航名称、默认时图标、选中时图标、具体配置如图所示。

这样就完成了仿菜谱微信小程序的底部标签导航配置，单击不同的导航，可以切换显示不同的页面，同时导航图标和导航文字会呈现为选中状态，如图所示。