微信小程序全局定义、局部定义导航样式

原文

微信小程序配置项有一个参数为：navigationStyle，设置导航栏样式，仅仅有两个值，default和custom。

default：默认样式

custom：自定义样式，只保留右上角的胶囊样式

1、全局自定义导航栏样式

在app.json中设置navigationStyle项

"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black", "navigationStyle": "custom" }

navbar代码： navbar.wxml:

<view class='nav-wrap'> <!-- 导航栏背景图片 --> <image class="backgroundimg" src="http://img4.imgtn.bdimg.com/it/u=25651867,761734299&fm=26&gp=0.jpg" bindload="imgLoaded"/> <!-- // 导航栏 中间的标题 --> <view class='nav-title' style='line-height: {{height*2 + 44}}px; color:#fff'> {{navbarData.title}} </view> </view>

navbar.wxss:

/* navbar.wxss */ /* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */ .nav-wrap { position: fixed; width: 100%; top: 0; background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4); color: #000; z-index: 9999999; overflow: hidden; font-size: 20px; height: 200rpx; } /* 背景图 */ .backgroundimg { position: absolute; z-index: -1; width: 100%; height: 100%; } /* 标题要居中 */ .nav-title { position: absolute; text-align: center; /* max-width: 400rpx; */ overflow: hidden; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 36rpx; color: #2c2b2b; } .nav-capsule { display: flex; align-items: center; margin-left: 30rpx; width: 140rpx; justify-content: space-between; height: 100%; } .back-pre { width: 32rpx; height: 36rpx; margin-top: 4rpx; padding: 10rpx; } .nav-capsule { width: 36rpx; height: 40rpx; margin-top: 3rpx; }

navbar.js:

const app = getApp() Component({ properties: { navbarData: { //navbarData 由父页面传递的数据，变量名字自命名 type: Object, value: {}, observer: function (newVal, oldVal) { } } }, data: { height: '', //默认值 默认显示左上角 navbarData: { showCapsule: 1 }, imageWidth: wx.getSystemInfoSync().windowWidth, // 背景图片的高度 imageHeight: '', // 背景图片的长度，通过计算获取 }, attached: function () { // 获取是否是通过分享进入的小程序 this.setData({ share: app.globalData.share }) // 定义导航栏的高度 方便对齐 this.setData({ height: app.globalData.height }) }, methods: { // 返回上一页面 _navback() { wx.navigateBack() }, // 计算图片高度 imgLoaded(e) { console.log(e.detail.height) this.setData({ imageHeight: e.detail.height * (wx.getSystemInfoSync().windowWidth / e.detail.width) }) }, tapName: function () { console.log(0) } //返回到首页 // _backhome() { // wx.switchTab({ // url: '/pages/index/index' // }) // } }, })

navbar.json:

{ "component": true, "usingComponents": {} }

2、局自定义导航栏样式

在当前页面的JSON文件中设置navigationStyle项

{ "usingComponents": {}, "navigationStyle": "custom" }

topbar.wxml:

<view class='nav-wrap'> <!-- 导航栏背景图片 --> <image class="backgroundimg" src="http://img4.imgtn.bdimg.com/it/u=25651867,761734299&fm=26&gp=0.jpg" bindload="imgLoaded" /> <!-- // 导航栏 中间的标题 --> <view class='nav-title' wx:if='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px;'> {{navbarData.title}} </view> <view class='nav-title' wx:else='{{!navbarData.white}}' style='line-height: {{height*2 + 44}}px; color:#fff'> {{navbarData.title}} </view> <view style='display: flex; justify-content: space-around;flex-direction: column'> <view class='nav-capsule' style='height: {{height*2 + 44}}px;'> <!-- 左上角返回按钮 --> <view class="back-view"> <image src='../../../img/fanhui.png' mode='aspectFit' class='back-pre' bindtap='_navback'></image> <image src='../../../img/home.png' mode='aspectFit' class='back-pre' bindtap='_backhome'></image> </view> </view> </view> </view>

topbar.wxss:

/* navbar.wxss */ /* 顶部要固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */ .nav-wrap { position: fixed; width: 100%; height: 200rpx; top: 0; background-image: linear-gradient(#2f52bc, #9198e5, #d0d9f4); color: #000; z-index: 9999999; overflow: hidden; border: 1px solid red; } /* 背景图 */ .backgroundimg { position: absolute; z-index: -1; width: 100%; height: 100%; } /* 标题要居中 */ .nav-title { position: absolute; text-align: center; max-width: 400rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 36rpx; color: #2c2b2b; font-weight: 450; } .nav-capsule { display: flex; align-items: center; margin-left: 30rpx; width: 140rpx; justify-content: space-between; height: 100%; } .back-view { display: flex; justify-content: space-between; padding: 10rpx 15rpx; } .back-view image:nth-child(1) { margin-right: 22rpx; } .back-pre { width: 32rpx; height: 36rpx; /* margin-top: 4rpx; *//* padding: 10rpx; */ } .nav-capsule { width: 36rpx; height: 40rpx; margin-top: 3rpx; }

topbar.json

{ "usingComponents": {}, "component": true }

topbar.js

const app = getApp() Component({ properties: { navbarData: { //navbarData 由父页面传递的数据，变量名字自命名 type: Object, value: {}, observer: function(newVal, oldVal) {} } }, data: { height: '', //默认值 默认显示左上角 navbarData: { showCapsule: 1 }, imageWidth: wx.getSystemInfoSync().windowWidth, // 背景图片的高度 imageHeight: '', // 背景图片的长度，通过计算获取 }, attached: function() { // 获取是否是通过分享进入的小程序 this.setData({ share: app.globalData.share }) // 定义导航栏的高度 方便对齐 this.setData({ height: app.globalData.height }) }, methods: { // 返回上一页面 _navback() { wx.navigateBack() }, // 计算图片高度 imgLoaded(e) { console.log(e.detail.height) this.setData({ imageHeight: e.detail.height * (wx.getSystemInfoSync().windowWidth / e.detail.width) }) }, tapName: function() { console.log(0) }, //返回到首页 _backhome() { wx.redirectTo({ url: '/pages/index/index' }) } }, })

在测试页面引入导航栏组件test.json:

{ "usingComponents": { "nav-bar": "../Components/topbar/topbar" }, "navigationStyle": "custom" }

test.wxml

<nav-bar navbar-data='{{nvabarData}}'></nav-bar> <view class="container">测试页面</view>

test.js的data添加数据

nvabarData: { showCapsule: 0, //是否显示左上角图标 1表示显示 0表示不显示 title: '测试标题', //导航栏 中间的标题 white: true, // 是就显示白的，不是就显示黑的。 }