• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序框架分析小练手(一)——猫眼电影底部标签导航制作 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

旧版猫眼电影底部有4个标签导航:电影、影院、发现、我的,如下图所示:

一、首先,打开微信开发者工具,新建一个项目:movie。如下图:

 

二、建立如下的一些目录:

 

 三、将底部标签导航图标的素材放到images的bar中(0表示标签未被选中,1表示选中),如图:

 

四、打开app.json配置文件,在pages数组中添加4个页面的路径——电影"pages/movie/movie"、影院"pages/cinema/cinema"、发现"pages/find/find"、我的"pages/me/me",保存后会自动生成相应的页面文件夹;删除"pages/index/index" "pages/logs/logs"页面路径以及对应的文件夹。

五、在window数组里配置窗口导航背景颜色为红色(#D53E37),导航栏文字为电影,字体颜色设置为白色(white),如下图:

 

 

六、在tabBar对象里配置底部标签导航背景色为灰色(#f5f5f5),文字默认为白色(white),文字选中时为红色(#D53E37),在list数组中配置底部标签导航对应的页面、导航名称、默认时图标和选中时图标。如下图:

 

 至此,就完成了猫眼电影底部导航的配置,效果图如下,当点击不同的导航标签,可以切换不同的页面,同时导航图标和导航文字会呈现为选中状态。

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap