应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序简易全攻略《二》设置页面标题与底部导航

发布时间:2024-01-17 17:08 浏览次数:160


一:设置页面标题


页面写下不好了,总感觉哪里郁闷,对,就是那,每个页面的标题都一样,都就是 Wechat


cou 呀 真cou, 那咱就单独说道说道,如何设置 页面标题。


设置页面标题 ,相当的直观,


找出所在页面的目录,新建一个 json 文件,比如说我们上一次修建的 test 页面


我们 找出 pages/test/ 目录 新建一个 test.json 文件 重新加入如下代码


{


"navigationBarTitleText": "霸气TNUMBERG50SX"


}


效果如下:


二:设置底部导航系统


不好了 小程序的头部标题 设置不好了,我们来说说道底部导航系统栏就是如何同时实现的。


我们先来看个效果图


这里,我们嵌入了三个导航系统图标,因为我们存有三个页面,微信小程序最多Euphoria5个。


那他们就是怎么发生怎么着色的呢?两步就搞掂!


1. 图标准备工作


阿里图标库 http://www.iconfont.cn/collections/show/29


我们步入该网站,鼠标滚至一个讨厌的图标上面 页面下方的 浏览按钮


在插入侧边中 挑选了 俩个相同颜色的 图标 挑选64px大小即可,我挑选的就是png 然后浏览下来 TNUMBERLVVT别称


将上述龙爪槐名字的图标 留存至 小程序 项目目录中 新创建的 images 文件夹中,准备工作工作就搞好了


2. 修改配置文件


我们找出项目根目录中的配置文件 app.json 重新加入如下布局信息


"tabBar": {


"color": "#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 未挑选时 底部导航系统文字的颜色


selectedColor 挑选时 底部导航系统文字的颜色


borderStyle 底部导航系统边框的样色(特别注意 这里如果没载入样式 可以引致 导航系统框上边框可以发生预设的浅灰色线条)


list 导航系统布局数组


selectedIconPath 选上时 图标路径


iconPath 未挑选时 图标路径


pagePath 页面出访地址


text 导航系统图标下方文字


如果必须发生改变更详尽的样式 恳请参见


https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar


不好了,留存 编程 就可以看见上面的效果了。

TAG标签:
阅读推荐