微信小程序,随笔2——navigator组件的使用,底部菜单栏,顶部导航栏

navigator组件的使用

navigator是一个块级元素,若想使其变为行级元素,须display:inline;

open-type属性

默认是navigate,保留当前页(隐藏),跳转到指定页,可返回上一页。
redirect,关闭当前页(卸载),跳转到指定页。
switchTab, 只能用于跳转到tabbar页面,并关闭其他非tabbar页面,tabbar之间做切换

hover-class属性,点击链接时使用

nav-default{red} 导航字体颜色
nav-hover {blue} 点击时的字体颜色
注:顺序会有影响







底部菜单栏 tabBar

在这里插入图片描述

"tabBar": {
    "list": [{	
      "pagePath": "pages/index/index",
      "text": "尺寸计算",
      "iconPath": "iconPath",							默认图样式
      "selectedIconPath": "selectedIconPath"			选中图样式
    },
    {
      "pagePath": "pages/other/other",
      "text": "日志",
      "iconPath": "iconPath", 
      "selectedIconPath": "selectedIconPath"
    }],
    "color": "#000", 						    导航栏默认字体
    "selectedColor": "#00f"						导航栏选中字体
  }

配置全局导航栏样式

在这里插入图片描述
在json文件中配置

{
"navigationBarTitleText": "每周推荐"
}

全局配置在app.json的window

 "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#0094ff",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": true
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值