index
index wxml
<nav navBG="{{navBG}}"></nav>
<view>home 页面</view>
index json
"usingComponents": { "nav":"/components/nav/nav" },
"navigationStyle":"custom", // 开启自定义导航头部
"navigationBarTextStyle": "white" // 设置右上角胶囊按钮 为透明
index js
Page({
/**
* 页面的初始数据
*/
data: {
navBG:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.navBG()
},
navBG(){
this.setData({
navBG : '' // 必须是base64格式的图片
}）
}) },})
组件 nav
nav wxml
<view class="navClass" style="height: {{navHight}}px; padding-top: {{navTop}}px; background: url({{navBG}})center center/100% 100% no-repeat;">
<view class="search"
style="width: {{searchWidth}}px;height: {{systemHeight}}px;border-radius: {{systemHeight}}px;background-color: #fff;margin-top: {{searchTop}}px;margin-left: {{searchLeft}}px;">
<image class="searchImg" src="../../static/image/search.png"></image>
<view class="searchList">搜索好货</view>
</view>
</view>
nav json
"component": true,
nav js
// components/nav/nav.js
Component({
/**
* 组件的属性列表
*/
properties: {
navBG:{
type:String,
value:'',
observer:function(navlue){
this.setData({
navBG : navlue
})
}
}
},
/**
* 组件的初始数据
*/
data: {
navLeft:null,
searchWidth:null,
searchLeft:null,
navHight:null,
navTop:null,
searchTop:null,
systemHeight:null,
navWidth:null,
navBG:null,
},
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { // 在组件实例进入页面节点树时执行
this.nav()
},
moved: function () { },
detached: function () { // 在组件实例被从页面节点树移除时执行
},
},
pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
/**
* 组件的方法列表
*/
methods: {
nav(){
try {
const res = wx.getSystemInfoSync()
console.log(res);
console.log(res.pixelRatio,'设备像素比') // 设备像素比
console.log(res.windowWidth,'可使用窗口宽度，单位px') // 可使用窗口宽度，单位px
console.log(res.windowHeight,'可使用窗口高度，单位px') // 可使用窗口高度，单位px
console.log(res.screenWidth,'屏幕宽度，单位px'); // 屏幕宽度，单位px
console.log(res.screenHeight,'屏幕高度，单位px'); // 屏幕高度，单位px
console.log(res.screenHeight - res.windowHeight , '导航高度');
console.log(res.statusBarHeight, '设备的高度');
const resed = wx.getMenuButtonBoundingClientRect()
console.log(resed);
console.log(resed.height, '按钮的高度'); // 按钮的高度
console.log(resed.width,'按钮的宽度');
console.log(resed.left,'离左边的宽度');
// 吸顶高度
const navTop = res.statusBarHeight
// 背景图的高度
const navHight = res.statusBarHeight + resed.height + (resed.top - res.statusBarHeight )*2
// 系统按钮离左边的距离
const navLeft = resed.left
// 搜索框的宽度
const searchWidth = resed.left - 20 // 这里宽度是自己定的
// 搜索框里左边的宽度
const searchLeft = 10 // 这里宽度是自己定的 / 2
// 系统按钮离顶部的距离
const searchTop = resed.top - res.statusBarHeight
// 系统按钮的高度
const systemHeight = resed.height
// 背景图的宽度
const navWidth = res.windowWidth
this.setData({
navWidth,
searchTop,
navLeft,
searchWidth,
searchLeft,
navHight,
navTop,
systemHeight
})
} catch (e) {
// Do something when catch error
}
},
}
})
nav wxss 部分
.navClass{
box-sizing: border-box;
background-color: #3399ff;
}
.search{
display: flex;
align-items: center;
/* z-index: 2; */
}
.searchList{
margin-left: 20rpx;
}
.searchImg{
width: 40rpx;
height: 40rpx;
margin-left: 20rpx;
}
