1.使用自定义导航栏 注意点
1.以下内容
1.1.Component里的Boolean类型的Property取值异常 始终为true,需更改成使用String类型（bug出现日期2018-11-20）
1.2.自定义导航栏 使用系统自带下拉刷新方法界面错误.需要使用scrollView 处理下拉上拉事件的监听
2.细节处
2.1 需要判定有关 安卓、iphone、iPhone X导航栏高度的不同
2.截图
自定义导航栏截图.png
3.代码
3.1获取手机 导航栏高度数据
app.js
//app.js
App({
onLaunch: function () {
const vm = this
wx.getSystemInfo({
success: function (res) {
// 1.导航栏高度
// 1.1 安卓
let totalTopHeight = 68
if (res.model.indexOf('iPhone X') !== -1) {
// 1.2\. iPhoneX 高度
totalTopHeight = 88
} else if (res.model.indexOf('iPhone') !== -1) {
// 1.3 非iphoneX的 iphone 高度
totalTopHeight = 64
}
//状态栏 高度
vm.globalData.statusBarHeight = res.statusBarHeight
vm.globalData.titleBarHeight = totalTopHeight - res.statusBarHeight
vm.globalData.navHeight = totalTopHeight;
},
failure(res) {
vm.globalData.statusBarHeight = 0
vm.globalData.titleBarHeight = 0
}
})
},
globalData: {
userInfo: null,
navHeight: 0,
statusBarHeight: 0,
titleBarHeight: 0
}
})
3.2 引用 自定义导航栏
index.json
{
"usingComponents": {
"customNav": "/components/customNav/customNav"
}
}
index.wxml
<view class='view-page'>
<customNav pageName="我是弄死谁看你否否你南斯拉夫" showHome="true"></customNav>
<view class='page-content' style='height:calc(100vh - {{navH}}px)'>
<!--这里放你的内容-->
</view>
</view>
3.3 customNav
customNav.js
// components/navbar/index.js
const App = getApp();
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
// 1.标题 抿成
pageName: String,
showNav: {
type: Boolean,
value: true
},
// 2.是否 显示首页按钮，切记 使用 String，
// 使用Boolean判定在 component中始终未true
showHome: {
type: String,
value: "false"
}
},
/**
* 组件的初始数据
*/
data: {
},
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
// 切记 wxml 赋值单位为 px
this.setData({
navH: App.globalData.navHeight,
titleBarH: App.globalData.titleBarHeight
})
},
detached: function () {
// 在组件实例被从页面节点树移除时执行
}
},
/**
* 组件的方法列表
*/
methods: {
//1\. 回退
navBack: function () {
console.log("点击 返回")
console.log(App.globalData.navHeight)
wx.navigateBack({
delta: 1
})
},
//2.回主页
toIndex: function () {
console.log("点击 首页")
// wx.navigateTo({
// // 以下为 首页 路径
// // url: '/pages/home/home'
// })
},
}
})
customNav.json
{
"component": true
}
customNav.wxml
<!-- 1.注意此处 使用px 不要使用 rpx -->
<view class="customNavBar" style='height:{{navH}}px'>
<!-- 1.1 标题 -->
<view class='navBar_title'>
<view class='navBar_detailTitle' style='height:{{titleBarH}}px ;line-height:{{titleBarH}}px'>{{pageName}}</view>
<!-- 1.2 返回 首页 按钮 在需要的地方 将View 替换成 image 即可-->
<view class="navBar_leftView {{showHome ? 'navBar_leftView_group' : ''}} row item-center" wx:if="{{showNav}}">
<block wx:if="{{showHome=='true'}}">
<view class='backView' style='color:orange' bindtap="navBack">返</view>
<view class='homeView' style='color:red' bindtap="toIndex">首</view>
</block>
<block wx:else>
<view class='back' style='color:orange' bindtap="navBack"></view>
</block>
</view>
<!-- 1.2 返回 首页 按钮 结束-->
</view>
</view>
customNav.wxss
/* components/navbar/index.wxss */
/* 1.导航栏 */
.customNavBar {
width: 100%;
overflow: hidden;
position: relative;
top: 0;
left: 0;
z-index: 10;
background-color:orange;
}
/* 1.1 导航栏标题 */
.navBar_title {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
/* background-color: red; */
color: #333;
}
/* 使用2层 view 处理 原因：尽量避免标题文字 过多 导致 文字超出 左右侧 按钮所在位置 */
.navBar_detailTitle {
margin-left: 25%;
width: 50%;
background-color: gray;
font-size: 30rpx;
font-weight: bolder;
text-align: center;
/* 单行 省略点 显示 */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
word-break: break-all;
}
/* 1.1 导航栏标题 结束*/
/* 1.2 返回键 与 首页键 */
.navBar_leftView {
position: absolute;
left: 10px;
bottom: 7px;
z-index: 11;
line-height: 1;
padding:3px 0;
display: flex;
flex: row;
}
.navBar_leftView_group {
border: 1px solid #e8e8e8;
border-radius: 20px;
overflow: hidden;
/* background-color: blue; */
}
.backView , .homeView {
width: 60rpx;
height: 60rpx;
background-color: green;
font-size: 30rpx;
text-align: center;
line-height: 60rpx;
}
.homeView{
margin-left: 5rpx;
}
