微信小程序自定义顶部导航组件

本文实例为大家分享了微信小程序自定义顶部导航组件，供大家参考，具体内容如下

在components中新建文件夹navbar

components/navbar.wxml

<!--components/navbar.wxml-->
<view class="navbar" style="height:{{navHeight+5}}px;background-image:url('{{imgUrl}}') ">
? <!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏，首页不显示 -->
? <view class="navbar_left" style="top:{{navTop}}px;height:{{jnheight-1}}px;width:{{jnwidth-3}}px" wx:if="{{showNav}}">
? ? <!-- 控制返回按钮的显示 -->
? ? <view class="navBack" bindtap="navBack">
? ? ? <image src="/images/back.png" mode="widthFix"></image>
? ? </view>
? ? <!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏-->
? ? <view class="nav_line" bindtap="navHome" wx:if="{{showHome}}">
? ? ? <image src="/images/index.png" mode="widthFix" style="width:50%"></image>
? ? </view>
? </view>
? <!-- 中间标题 -->
? <view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view>
</view>

components/navbar.js

const App = getApp();
Component({
? // 组件的属性列表
? properties: {
? ? pageName: String, //中间的title
? ? showNav: { //判断是否显示左上角的按钮 ? ?
? ? ? type: Boolean,
? ? ? value: true
? ? },
? ? showHome: { //判断是否显示左上角的home按钮
? ? ? type: Boolean,
? ? ? value: true
? ? },
? ? imgUrl:{//图片背景路径
? ? ? type: String,
? ? ? value: App.globalData.imgLink+'index.jpg',
? ? },
? },
? // 组件的初始数据
? data: {
? ? showNav: true, //判断是否显示左上角的home按钮
? ? showHome: true, //判断是否显示左上角的按钮

? },
? lifetimes: {
? ? // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
? ? attached: function() {
? ? ? this.setData({
? ? ? ? navHeight: App.globalData.navHeight, //导航栏高度
? ? ? ? navTop: App.globalData.navTop, //胶囊按钮与顶部的距离
? ? ? ? jnheight: App.globalData.jnheight, //胶囊高度
? ? ? ? jnwidth: App.globalData.jnwidth //胶囊宽度
? ? ? })
? ? }
? },
? // 组件的方法列表
? methods: {
? ? //回退
? ? navBack: function() {
? ? ? wx.navigateBack()
? ? },
? ? //回主页
? ? navHome: function() {
? ? ? wx.switchTab({
? ? ? ? url: '/pages/index/index'
? ? ? })
? ? },
? }
})

components/navbar.wxss

/* components/navbar.wxss */
.navbar {
? width: 100%;
? overflow: hidden;
? position: sticky;
? top: 0;
? left: 0;
? z-index: 10;
? flex-shrink: 0;
? background: #fff;
?
}

.navbar_left {
? display: -webkit-flex;
? display: flex;
? -webkit-box-align: center;
? -ms-flex-align: center;
? -webkit-align-items: center;
? align-items: center;
? position: absolute;
? left: 10px;
? z-index: 11;
? line-height: 1;
? border: 1rpx solid #f0f0f0;
? border-radius: 40rpx;
? overflow: hidden;
? background: rgba(255, 255, 255, 0.6);
}
.navBack image{
? width: 60%;
}
?
.navbar_left view {
? width: 50%;
? display: flex;
? align-items: center;
? justify-content: center;
}
?
.nav_line {
? border-left: 1rpx solid #f0f0f0;
}
?
.navbar_title {
? width: 100%;
? box-sizing: border-box;
? padding-left: 115px;
? padding-right: 115px;
? height: 32px;
? line-height: 32px;
? text-align: center;
? position: absolute;
? left: 0;
? z-index: 10;
? color: #333;
? font-size: 16px;
? font-weight: bold;
? text-overflow: ellipsis;
? overflow: hidden;
? white-space: nowrap;
}

在公共组件app.js中获取导航高度等信息

// app.js
App({
? onLaunch() {
? ? //设置导航栏
? ? //获取菜单按钮的布局位置信息
? ? let menuButtonObject = wx.getMenuButtonBoundingClientRect();
? ? //获取系统信息
? ? wx.getSystemInfo({
? ? ? success: res => {
? ? ? ? console.log('xxxx', res)
? ? ? ? //状态栏的高度
? ? ? ? let statusBarHeight = res.statusBarHeight,
? ? ? ? ? //胶囊按钮与顶部的距离
? ? ? ? ? navTop = menuButtonObject.top,
? ? ? ? ? navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
? ? ? ? let globalData = this.globalData;
? ? ? ? globalData.navHeight = navHeight;//导航栏高度
? ? ? ? globalData.navTop = navTop;//胶囊按钮与顶部的距离
? ? ? ? globalData.jnheight = menuButtonObject.height;//胶囊的高度
? ? ? ? globalData.jnwidth = menuButtonObject.width;//胶囊的宽度
? ? ? ? globalData.screenHeight = res.screenHeight;//屏幕高度
? ? ? },
? ? ? fail(err) {
? ? ? ? console.log(err);
? ? ? }
? ? });

? },
? //设置全局对象
? globalData: {
? ? navHeight: 0,
? ? navTop: 0,
? ? jnheight: 0,
? ? jnwidth: 0,
? ? screenHeight: 0,
? }
})

在app.json中设置导航自定义，去除默认的导航 [navigationStyle]: "custom"

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

引用到pages中的文件里

json文件中引用组件****

{
? "usingComponents":{
? ? "navbar":"/components/navbar/navbar"
? }
}

html文件中

<navbar page-name="{{navbar.shoppingName}}"></navbar>

js文件中

Page({
? data:{
? ? navbar:{
? ? ? shoppingName:'首页',
? ? },
? }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序自定义顶部导航组件的详细内容...