ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

在线预约小程序搭建教程5-导航条的制作

2021-12-22 20:04:17  阅读:237  来源: 互联网

标签:教程 菜单 预约 选中 首页 设置 导航条 图标


教程总目录
01 总体介绍
02 创建数据源
03 创建应用
04 首页的制作

上一节我们介绍了首页的功能,本节我们完成首页最下边的导航条的功能开发。

首先在页面中增加tab栏组件
在这里插入图片描述
导航条需要设置选中的图标和未选中的图标,图标从哪里获取呢?

我们一般可以从iconfont里获取免费的图标,搜索首页,配置好颜色和大小
在这里插入图片描述
一般需要两个图标,一个是选中的图标,一个是未选中的图标,我们可以用颜色来区分

图标下载好之后,需要上传到素材里,点击导航条的素材库
在这里插入图片描述
点击添加素材
在这里插入图片描述
素材设置好之后我们就可以设置导航条的具体内容了
在这里插入图片描述
这里的选中值,填写我们首页的页面ID,我们首页的ID是index

然后设置第一个菜单
在这里插入图片描述
接着设置好第二个菜单
在这里插入图片描述
最后设置好第三个菜单
在这里插入图片描述
将路由的配置项打开,修改文字颜色和图标大小
在这里插入图片描述
这样一个导航条就设置好了

标签:教程,菜单,预约,选中,首页,设置,导航条,图标
来源: https://blog.csdn.net/u012877217/article/details/122084299

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有