- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
框架练习大案例——仿香哈菜谱微信小程序
香哈菜谱是围绕美食而做的一款小程序,在这里可以查看各式各样的菜谱以及这些菜如
何来做,对于菜谱类 App 软件,用户使用的频次不是那么高,当用户碰到不会做的菜式或
者想做一些新的菜式,才会去 App 软件查看,而微信小程序就是可以满足这种低频使用这
个场景,如图所示。
学做菜 头条
1 底部标签导航设计
仿香哈菜谱微信小程序,底部标签导航分为五个标签导航:学做菜、头条、美食圈、消
息、我的,标签导航选中时导航图标会变为红色图标,导航文字会变为红色文字。
底部标签导航选中效果
(1)新建一个无AppID 的xhcp 项目。
添加项目
(2 )将准备好的底部标签导航图标、美食轮播图片、宫格导航图标、香哈头条美食图
片图片拷贝到pages 文件夹下;
(3 )打开app.json 配置文件,在pages 数组里添加五个页面路径pages/cook/cook、p
ages/headline/headline、pages/food/food、pages/message/message、pages/me/me,保存
后会自动生成相应的页面文件夹;删除掉pages/index/index、pages/logs/logs页面路径以
及对应的文件夹。
配置页面路径
(4 )在window 数组里配置窗口导航背景颜色为灰色(#494949 ),导航栏文字为 “学
做菜”,字体颜色设置为白色 (#ffffff ),具体配置如图所示。
窗口及导航栏配置
(5 )在tabBar 对象里配置底部标签导航背景色为白色(#ffffff ),文字默认颜色为灰色
(#999999 ),选中时为红色(#CC1004 ),在list 数组里配置底部标签导航对应的页面、导
航名称、默认时图标、选中时图标,具体配置如图所示。
底部标签导航配置
这样就完成仿菜谱精灵微信小程序的底部标签导航配置,单击不同的导航,可以进行切
换显示不同的页面,同时导航图标和导航文字会呈现为选中状态。
学做菜界面
2 宫格导航设计
在学做菜这个界面里,有了海报轮播的图片,在微信小程序里有专门的 swiper 滑块视
图组件实现这个效果,在以后的章节中会介绍它的使用,有宫格导航:菜谱分类、视频、美
食养生、闪购四个导航。
海报图片和宫格导航
(1)进入到pages/cook/cook.wxml 文件,先设计海报轮播区域,采用一张图片来进行
布局,图片的宽度设置为100%,高度设置为230px ,具体代码如下。
view class=content
view class=img
image src=../images/haibao/haibao-1.jpg style=width:100%;height:230px;/image
/view
/view
界面效果如图所示。
海报图片
(2 )设计宫格导航,分为四个导航:菜谱分类、视频、美食养生、闪购,每个导航对
应一个图标,在导航的下面是灰色的间隔线,具体代码如下。
view class=content
view class=img
image src=../images/haibao/haibao-1.jpg style=width:100%;height:230px;/image
/view
view class=nav
view class=nav-item
view image
您可能关注的文档
最近下载
- 2019北京高三二模七选五汇编.docx VIP
- Unit 3 Food 知识清单(六大知识题型)总梳理(解析版).docx VIP
- 统编版道德与法治三年级上册第8课《同学相伴》教学设计.docx VIP
- 2025至2030年中国管道直饮水市场发展前景分析及行业投资规划建议报告.docx
- 单髁置换手术步骤.pptx VIP
- Unit 3 Food 知识清单(六大知识题型)总梳理(原卷版).docx VIP
- 教师评课用语缺点建议.doc VIP
- 2025年全国红十字应急救护竞赛活动考试题库300题(含答案).docx
- 互联网交往的利与弊-教学素材【课件】.ppt VIP
- 急性肾损伤的护理.pptx VIP
原创力文档


文档评论(0)