微信小程序简易全攻略二设置页面标题与底部导航_第1页
微信小程序简易全攻略二设置页面标题与底部导航_第2页
微信小程序简易全攻略二设置页面标题与底部导航_第3页
微信小程序简易全攻略二设置页面标题与底部导航_第4页
微信小程序简易全攻略二设置页面标题与底部导航_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、微信小程序简易全攻略二设置页面标题与底部导航一：设置页面标题页面写好了，总感觉哪里不爽，对，就是那，每个页面的标题都一样，都是 Wechatcou 呀 真 cou, 那咱就单独说说，如何设置 页面标题。设置页面标题 ，相当的简单，找到所在页面的目录，新建一个 json 文件，比如我们上一次建造的 test页面我们 找到 pages/test/ 目录 新建一个 test.json 文件 加入如下代码navigationBarTitleText: 霸气侧漏view plain co效果如下：二：设置底部导航好了 小程序的头部标题设置好了，我们来说说底部导航栏是如何实现的。我们先来看个效果图这里，我

2、们添加了三个导航图标，因为我们有三个页面，微信小程序最多能加 5 个。那他们是怎么出现怎么着色的呢？两步就搞定！1. 图标准备阿里图标库 /collections/show/29我们进入该网站，鼠标滑到一个喜欢的图标上面点击下方的下载按钮在弹出框中 选择了 俩个不同颜色的 图标 选择 64px 大小即可，我选择的是 png然后下载下来 起上别名将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中，准备工作就做好了2. 更改配置文件我们找到项目根目录中的配置文件 app.json 加入如下配置信息tabBar: color:

3、 #a9b7b7,selectedColor: #11cd6e,borderStyle:white,list: selectedIconPath: images/111.png,iconPath: images/11.png,pagePath: pages/index/index,text: 首页, selectedIconPath: images/221.png,iconPath: images/22.png,pagePath: pages/logs/logs,text: 日志, selectedIconPath: images/331.png,iconPath: images/33.png,pagePath: pages/test/test,text: 开心测试,解释一下 对应的属性信息tabBar 指底部的 导航配置属性color 未选择时 底部导航文字的颜色里如果没有写入样式会导致 导航框上边框会出现默认的浅灰色线条）list导航配置数组selectedIconPath 选中时 图标路径iconPath 未选择时 图标路径pagePath 页面访问地址text 导航图标下方文字如果要改变更详细的样式 请参看/debug/

人人文库> 全部分类> 应用文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论