链接导航 navigator 组件及open-type、hover-class属性与导航栏tabBar配置使用
一、链接导航 navigator 组件及open-type、hover-class属性使用
about.wxml
<view>
<text>hello world </text>
<navigator url="/pages/weekly/weekly" style="display:inline;" open-type="redirect" hover-class="nav_hover" class="nav_default">weekly</navigator>
</view>
about.wxss
.nav_default{
color: blue;
}
.nav_hover{
color: red;
}
hover-class="nav_hover" //点击时样式
class="nav_default" //默认样式
注:根据CSS3中的麒麟算法,当两个CSS样式属性发生冲突的时候,因为这两个样式属性特质相同的,谁在后面定义谁的属性取值就会胜出,所以前后顺序要做调整。
open-type="redirect" //不可返回,即导航栏不会出现返回功能
open-type="navigate" //可返回,默认
open-type="switchTab" //navigator与tabBar 同时可链接时,需要将open-type的属性设为switchTab,否则navigator点击不可用
文档:https://developers.weixin.qq.com ... nent/navigator.html
二、配置tabBar的方法
app.json
{
"pages": [
"pages/about/about","pages/weekly/weekly"
],
"sitemapLocation": "sitemap.json",
"tabBar": {
"list": [{
"pagePath": "pages/about/about",
"text": "ABOUT",
"iconPath": "images/icons/1.png",
"selectedIconPath": "images/icons/3.png"
},
{
"pagePath": "pages/weekly/weekly",
"text": "WEEKLY",
"iconPath": "images/icons/2.png",
"selectedIconPath": "images/icons/4.png"}],
"color": "#000",
"selectedColor": "#ff0000"
}
}
tabBar属性
list:tabBar上的属性设置(数组:pagePath、text、iconPath、selectedIconPath)tabBar中list的个数最少2个,最多5个
color:tabBar上的文字默认颜色
selectedColor:tabBar上的文字选中时的颜色
文档:https://developers.weixin.qq.com ... ion/app.html#tabBar
weekly.wxml
<view class="content">
<image src="../../images/2.png" class="img_banner"></image>
<view>
<text>hello world </text>
<navigator url="/pages/weekly/weekly" style="display:inline;" open-type="switchTab" hover-class="nav_hover" class="nav_default">weekly</navigator>
</view>
<image src="http://bbs.bixingcms.com/data/attachment/forum/202002/21/192934puqrqnnunn0xk0km.png"></image>
<text>wechat</text>
<image src="/images/3.png"></image>
</view>
open-type="switchTab"//navigator与tabBar 同时可链接时,需要将open-type的属性设为switchTab,否则点击navigater无效。
三、顶部导航栏样式全局配置,避免每个页面重复配置,出现混乱。
weekly.json
{
"navigationBarTitleText": "WEEKLY", //当前页标题
}
app.json
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "小程序", //全局默认标题
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
}
|