整体介绍
在开发过程中,遇到自定义navigationbar的问题,已解决,做记录用
下面的代码的自定义navigationbar,效果为页面未滚动时,背景透明,无页面标题;页面滚动,背景颜色改变,页面标题出现。整体代码适用于与单个页面设置。
样式展示
代码
-
单页面设置navigationbar
.wxml代码
<view class="navigation" style="background-color: {{navigationBackgroundColor}}; height: {{paddingTopNum}}px; padding-top: {{statusBarHeight}}px;">
<!-- 左边的返回按钮图标 -->
<view class='navigation_bar_left' bindtap="back">
<view class="iconfont icon-fanhuijian"></view>
</view>
<!-- 页面标题 -->
<view class='navigation_bar_center'>
<view>{{navigationBarTitleText}}</view>
</view>
</view>
<view class="box">
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
<view>再蹚一条人世间的河,那些你跌落过的沟壑</view>
</view>
.wxss代码
.navigation {
position: fixed;
top: 0;
left: 0;
z-index: 5001;
width: 100%;
color: #fff;
display: flex;
align-items: center;
}
.navigation_bar_left {
padding-left: 10rpx;
align-items: center;
}
.navigation_bar_left .icon-fanhuijian{
font-size: 30rpx;
}
.navigation_bar_center {
font-size: 26rpx;
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
flex: 1;
}
.js代码
Page({
/**
* 页面的初始数据
*/
data: {
navigationBarTitleText: '',
navigationBackgroundColor: '',
paddingTopNum: '',
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.paddingTopNum()
},
/**
* 监听滚动scrollTop滚动的距离,获取滚动条当前位置
* 当滚动
* */
onPageScroll: function (e) {
let navigationBarTitleText = '页面标题'
if (e.scrollTop > 0) {
this.setData({
navigationBarTitleText: navigationBarTitleText,
navigationBackgroundColor: '#8abcd1',
})
} else {
this.setData({
navigationBarTitleText: '',
navigationBackgroundColor: '',
})
}
},
/*
自定义tab高度设置
*/
paddingTopNum: function () {
const {
height,
top
} = wx.getMenuButtonBoundingClientRect()
const {
statusBarHeight
} = wx.getSystemInfoSync();
const navbarH = (top - statusBarHeight) * 2 + height + statusBarHeight
this.setData({
paddingTopNum: navbarH,
statusBarHeight:statusBarHeight
})
},
//自定义导航返回图标操作
back () {
wx.navigateBack({
delta: 1
}).then(res => {
console.log(res)
}).catch(err => {
// 如果报错,说明是通过二维码或者分享进入的,直接返回首页
wx.reLaunch({
url: '../../../pages/index/index',
})
})
},
})
组件设置navigationbar
.wxml代码
<!-- 自定义navigationBar -->
<view class="navigation" style="background-color: {{navigationBackgroundColor}}; height: {{paddingTopNum}}px; padding-top: {{statusBarHeight}}px;">
<!-- 左边的返回按钮图标 -->
<view class='navigation_bar_left' bindtap="back">
<view class="iconfont icon-fanhuijian"></view>
</view>
<view class='navigation_bar_center'>
<view>{{navigationBarTitleText}}</view>
</view>
</view>
.wxss代码
.navigation {
position: fixed;
top: 0;
left: 0;
z-index: 5001;
width: 100%;
color: #fff;
display: flex;
align-items: center;
}
.navigation_bar_left {
padding-left: 10rpx;
align-items: center;
}
.navigation_bar_left .icon-fanhuijian{
font-size: 30rpx;
}
.navigation_bar_center {
font-size: 26rpx;
text-align: center;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
flex: 1;
}
.js代码
Component({
options: {
addGlobalClass: true
},
/**
* 组件的属性列表
*/
properties: {
navigationBackgroundColor: {
type: String,
value: ''
},
navigationBarTitleText: {
type: String,
value: ''
},
},
/**
* 组件的初始数据
*/
data: {
paddingTopNum: '',
statusBarHeight: '',
},
lifetimes: {
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () {
const {
height,
top
} = wx.getMenuButtonBoundingClientRect()
const {
statusBarHeight
} = wx.getSystemInfoSync();
const navbarH = (top - statusBarHeight) * 2 + height + statusBarHeight
this.setData({
paddingTopNum: navbarH,
statusBarHeight: statusBarHeight
})
},
},
/**
* 组件的方法列表
*/
methods: {
//自定义导航返回图标操作
back() {
wx.navigateBack({
delta: 1
}).then(res => {
console.log(res)
}).catch(err => {
// 如果报错,说明是通过二维码或者分享进入的,直接返回首页
wx.reLaunch({
url: '../../../pages/index/index',
})
})
},
},
})
父组件引用
.wxml代码
<component-header navigationBackgroundColor="{{navigationBackgroundColor}}" navigationBarTitleText="{{navigationBarTitleText}}"></component-header>
.js代码
data: {
navigationBarTitleText: '',
navigationBackgroundColor: '',
},
/**
* 监听滚动scrollTop滚动的距离,获取滚动条当前位置
* 当滚动
* */
onPageScroll: function (e) {
let navigationBarTitleText = '健康报告'
if (e.scrollTop > 400) {
this.setData({
navigationBarTitleText: navigationBarTitleText,
navigationBackgroundColor: '#8C69CD',
})
} else {
this.setData({
navigationBarTitleText: '',
navigationBackgroundColor: '',
})
}
},