封装

topnav.js

const App = getApp();
Component({// 组件的属性列表properties: {pageName: String, //中间的titleshowNav: { //判断是否显示左上角的按钮    type: Boolean,value: true},showHome: { //判断是否显示左上角的home按钮type: Boolean,value: true},showLocation:{type: Boolean,value: false      },showColor:String, //颜色showStore:String,showWhite:{type: Boolean,value: false      },titlecolor:String,//titletitleleft:String,//title//中间是否是定位},// 组件的初始数据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() {let pages = getCurrentPages();let prevpage = pages[pages.length - 2];prevpage.setData({isflag:true})wx.navigateBack()},//回主页navHome: function() {wx.reLaunch({url: '/pages/index/index'})},//跳转定位页面golocation:function(){wx.navigateTo({url: '/pages/switchcity/switchcity'})}}
})

topnav.json

{"component": true,"usingComponents": {}
}

topnav.wxml

<view class="navbar" style="height:{{navHeight}}px;background:{{showColor}};"><!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏，首页不显示 --><view class="navbar_left"style="top:{{navTop}}px;height:{{jnheight}}px;width:{{jnwidth}}px;background:{{showWhite?'rgba(0,0,0,0.2)':''}};"wx:if="{{showNav}}"><!-- 控制返回按钮的显示 --><view bindtap="navBack"><!-- <image src="../../images/back.png" mode="widthFix" style="width:40%"></image> --><i class="iconfont iconfanhui" style="color:{{showWhite?'#fff':''}};"></i></view><!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏--><view class="nav_line" bindtap="navHome" wx:if="{{showHome}}"><!-- <image src="../../images/backhome.png" mode="widthFix" style="width:50%"></image> --><i class="iconfont iconshouye" style="color:{{showWhite?'#fff':''}};"></i></view></view><!-- 中间标题 --><!-- <view wx:if="{{showLocation}}" style="top:{{navTop}}px;"  class="navbar_title"><view bindtap="golocation">{{pageName}}<i class="iconfont iconarrowtriangle_down_fill"></i></view></view> --><view class="navbar_title {{showWhite?'':''}}" style="top:{{navTop}}px;padding-left: {{titleleft}}px;color:{{titlecolor}}"><view>{{pageName}}</view></view><!-- white_title  白色 -->
</view>

topnav.wxss

@import "/static/css/icon.wxss";.navbar {width: 100%;overflow: hidden;top: 0;left: 0;flex-shrink: 0;position: fixed !important;z-index: 9999;background: white;
}.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: 20rpx;z-index: 11;line-height: 1;border: 1rpx solid #f0f0f0;border-radius: 40rpx;overflow: hidden;background: rgba(255, 255, 255, 0.6);box-sizing: border-box;
}.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;text-align: center;height: 64rpx;line-height: 64rpx;position: absolute;left: 0;z-index: 10;font-size: 32rpx;font-weight: bold;text-overflow: ellipsis;overflow: hidden;
}.white_title {color: #fff !important;
}.iconfont {font-size: 34rpx;font-weight: 600;
}.iconarrowtriangle_down_fill {font-size: 20rpx;margin-left: 6rpx;
}

icon.wxss

@font-face {font-family: 'iconfont';  /* Project id 2408657 */src: url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.woff2?t=1705321879152') format('woff2'),url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.woff?t=1705321879152') format('woff'),url('//at.alicdn.com/t/c/font_2408657_h16zp03rdqu.ttf?t=1705321879152') format('truetype');
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.iconxuanzhong1:before {content: "\e631";
}.iconweixuanzhong:before {content: "\e633";
}.iconcaigoufapiao:before {content: "\e6b7";
}.iconshangsheng1:before {content: "\e737";
}.iconkefu:before {content: "\e625";
}.iconFrame:before {content: "\e636";
}.iconxiajiantou:before {content: "\eb6d";
}.iconshangjiantou:before {content: "\eb6e";
}.iconshangxiaqiehuan:before {content: "\e9cd";
}.iconxiala2:before {content: "\e634";
}.iconwenduxiajiang:before {content: "\e622";
}.icondiandiandian:before {content: "\e6f5";
}.iconliuyan1:before {content: "\e748";
}.icondizhi:before {content: "\e63e";
}.iconyunshu:before {content: "\e637";
}.iconshang1:before {content: "\e64e";
}.iconxia1:before {content: "\e64f";
}.iconcha:before {content: "\e679";
}.icona-xuanzhong:before {content: "\e602";
}.iconbitian:before {content: "\e669";
}.iconzuobiaofill:before {content: "\e768";
}.icondianhua:before {content: "\e635";
}.iconzuobiao:before {content: "\e615";
}.iconshanchu:before {content: "\e601";
}.icon4Sdian:before {content: "\e740";
}.iconxiala1:before {content: "\e756";
}.iconzhankaishangxia:before {content: "\e7b2";
}.iconshang:before {content: "\e610";
}.iconxia:before {content: "\e61b";
}.iconxiala:before {content: "\e7b1";
}.iconxuanzhong:before {content: "\e60d";
}.iconarrowtriangle_down_fill:before {content: "\e620";
}.iconshangsheng:before {content: "\e609";
}.iconxiajiang:before {content: "\e738";
}.iconchacha:before {content: "\e62f";
}.iconright:before {content: "\eb1b";
}.iconfanhui1:before {content: "\e61e";
}.iconsousuo:before {content: "\e600";
}.iconfanhui:before {content: "\e63b";
}.iconshouye:before {content: "\e659";
}

使用

index.wxml

  <topnav pageName="导航"></topnav>

index.json

{"usingComponents": {"topnav": "/component/topnav/topnav",},"navigationStyle":"custom","navigationBarTitleText": "text"
}