微信小程序 ---- 自定义顶部导航栏
程序员文章站
2022-04-29 09:36:08
微信小程序 ---- 自定义顶部导航栏需要使用到 微信小程序中的 wx.getSystemInfoSync 方法 和 wx.getMenuButtonBoundingClientRect 方法。方法作用:wx.getSystemInfoSync(): 获取 手机系统信息。wx.getMenuButtonBoundingClientRect():获取 胶囊按钮的尺寸,以及位置信息。首先需要知道的是 导航栏 距离屏幕顶部 的距离就是 状态栏的高度。具体计算见下代码块://app.jsApp({...
微信小程序 ---- 自定义顶部导航栏
- 需要使用到 微信小程序中的 wx.getSystemInfoSync 方法 和 wx.getMenuButtonBoundingClientRect 方法。
方法作用:
wx.getSystemInfoSync(): 获取 手机系统信息。
wx.getMenuButtonBoundingClientRect():获取 胶囊按钮的尺寸,以及位置信息。
首先需要知道的是 导航栏 距离屏幕顶部 的距离就是 状态栏的高度。具体计算见下代码块:
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
const systemInfo = wx.getSystemInfoSync(); //获取系统信息
const menuInfo = wx.getMenuButtonBoundingClientRect(); // 获取胶囊按钮的信息
this.globalData.menuHeight = menuInfo.height; // 获取胶囊按钮的高
this.globalData.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏的高
this.globalData.menuRight = menuInfo.right; // 获取胶囊按钮的距离屏幕最右边的距离(此处用于设置导航栏左侧距离屏幕的距离)
this.globalData.navBarHeight = (menuInfo.top - systemInfo.statusBarHeight) * 2 + menuInfo.height; // 计算出导航栏的高度
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null,
navBarHeight:0,// 导航栏高度
menuHeight:0,//胶囊按钮 高度
statusBarHeight:0,//状态栏高度
menuRight:0,//胶囊按钮 距离屏幕右边的距离
}
})
接下来就是写一个全局的自定义导航栏组件
components/navigation/index.wxml
<view class="navigationPage {{defaultSetting.size}}" style="height: {{ defaultSetting.height }}px;padding-top:{{defaultSetting.paddingTop}}px;background-color:{{defaultSetting.backgroundColor}}">
<view class="navigationIcon" bindtap="bindCallBack">
返回上一页
</view>
<view class="navigationTitle">
{{defaultSetting.title}}
</view>
</view>
components/navigation/index.js
Component({
//接收 外部传入到属性值
properties:{
defaultSetting:{
type:Object,
value:{
title:'默认标题',
height:20,
paddingTop:0,
backgroundColor:'#fff',
size:'default'
}
},
},
// 定义响应式数据
data:{
},
// 定义方法
methods:{
bindCallBack(){
wx.navigateBack({
delta: 1,
});
}
}
})
components/navigation/index.wxss
.navigationPage{
position: fixed;
top:0;
left:0;
width:100%;
background-color:red;
display:flex;
align-items: center;
text-align:center;
box-sizing: content-box;
}
.navigationIcon{
position: absolute;
left:30rpx;
}
.navigationTitle{
font-weight:600;
flex:1;
}
.small{
font-size:14px;
}
.default{
font-size:16px;
}
.large{
font-size:18px;
}
components/navigation/index.json
{
"component": true
}
然后在需要使用自定义导航栏的页面里面直接使用即可
eg:
myTest/customNavigation/index.json
json 文件里面需要把 navigationStyle 属性设置为 custom
{
"usingComponents": {
"navigation":"../../components/navigation/index"
},
"navigationStyle": "custom"
}
myTest/customNavigation/index.wxml
然后直接在 index.wxml文件里面最顶部使用即可
<!--myTest/customNavigation/index.wxml-->
<navigation defaultSetting="{{navigationSetting}}"></navigation>
<view class="customNavigationPage">
<text>myTest/customNavigation/index.wxml</text>
<text>welcome go to customNavigation page</text>
</view>
myTest/customNavigation/index.js
配置传入自定义导航栏的参数
// myTest/customNavigation/index.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
navigationSetting:{
title:'自定义标题',
height: app.globalData.navBarHeight,
paddingTop: app.globalData.statusBarHeight,
backgroundColor:'#fff',
size:'default'
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})```
本文地址:https://blog.csdn.net/qq_41709082/article/details/109577865
上一篇: vbs字符串分割函数
下一篇: 百度地图app怎么快速查找附近的厕所?