uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置 ...

  金牌会员 | 2024-11-19 19:59:09 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题

主题 868|帖子 868|积分 2604

媒介:

本文记录的是微信小程序的全局配置、导航栏配置、tabBar配置
一、全局配置:

可以直接查官方文档:pages.json 页面路由 | uni-app官网,有非常详细的文档说明

都是在 pages.json里面做配置的,我们可以看到已经有一些配置了

 简单写了一下每句注释:
  1. "globalStyle": {
  2.         "navigationBarTextStyle": "black",//顶部导航栏文字颜色,只支持black、white
  3.                 "navigationBarTitleText": "uni-app",//全局配置顶部导航栏文字
  4.                 "navigationBarBackgroundColor": "#F8F8F8",
  5.         //顶部导航栏背景色,只能写16进制,英文单词或rgb会报错
  6.                 "backgroundColor": "#F8F8F8",//下拉背景色
  7.         "enablePullDownRefresh":true//开启下拉刷新
  8.         },       
  9.        
复制代码
留意:

1、已经配置了"navigationBarTitleText": "uni-app"全局配置顶部导航栏文字,但是为什么我的分类页没有显示顶部导航栏的文字呢?


这是因为尚有局部的配置 将导航栏文字设置成了空字符串:

2、只设置了backgroundColor之后发现不能下拉,是因为没有设置enablePullDownRefresh,enablePullDownRefresh默认值为false,设置之后结果如下:


二、局部配置

1、局部配置和全局配置的内容差不多,可以参考官方文档,差别就是要写在pages的style里面


2、需要留意的是,局部配置会覆盖全局配置

三、tabBar配置

1、部分常用配置:

  1. "tabBar": {
  2.                 "selectedColor": "#ff5500", //tab 上的文字选中时的颜色
  3.                 "list": [{
  4.                         "pagePath": "pages/home/home", //页面路径
  5.                         "text": "主页", //tab 上按钮文字
  6.                         "iconPath": "static/tabBarIcon/home.png", //图片路径
  7.                         "selectedIconPath": "static/tabBarIcon/home_selected.png" //选中时的图片路径
  8.                 }, {
  9.                         "pagePath": "pages/categorty/categorty",
  10.                         "text": "分类",
  11.                         "iconPath": "static/tabBarIcon/category.png",
  12.                         "selectedIconPath": "static/tabBarIcon/category_selected.png"
  13.                 }, {
  14.                         "pagePath": "pages/mine/mine",
  15.                         "text": "个人",
  16.                         "iconPath": "static/tabBarIcon/mine_line.png",
  17.                         "selectedIconPath": "static/tabBarIcon/mine_line_selected.png"
  18.                 }]
  19.         },
复制代码
 2、展示结果:


3、官网上对每个属性都有说明:




免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

金牌会员
这个人很懒什么都没写!
快速回复 返回顶部 返回列表