⼩程序⾃定义头部导航栏（组件化）
本⽂实例为⼤家分享了⼩程序⾃定义头部导航栏的具体代码，供⼤家参考，具体内容如下
效果图
⽀持导航栏⾃定义背景颜⾊、背景图⽚⽀持返回⽂字⾃定义⽀持导航标题⾃定义
⾸先在app.json window配置项添加
"window": {
"navigationStyle": "custom"
}
⾃定义头部导航栏代码
wxml部分
<view class="cu-custom" >
<view class="cu-bar {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" >
<view class="action" bindtap="BackPage" wx:if="{{!isShare && isBack}}">
<text class="icon-back"></text>
<slot name="backText"></slot>
</view>
<view class="action border-custom" wx:if="{{isShare && isBack}}" >
<text class="icon-back" bindtap="BackPage"></text>
<text class="icon-homefill" bindtap="toHome"></text>
</view>
<view class="content" >
<slot name="content"></slot>
</view>
</view>
写文章的小程序</view>
wxss部分
.cu-custom { display: block; position: relative; }
.cu-custom .cu-bar {display: flex; align-items: center; justify-content: space-between;position: fixed; w
idth: 100%; top: 0; min-height: 100rpx; padding-right: 220rpx; box-shadow: 0rpx 0rpx 0rpx; z-index: 9999; background-color: #fff; }
.cu-custom .cu-bar .border-custom { position: relative; background: rgba(255,255,255,0.5); border-radius: 1000rpx; height: 30px; }
.cu-custom .cu-bar .action { display: flex; align-items: center; height: 100%; justify-content: center; max-width: 100%; }
.cu-custom .cu-bar .action:first-child { margin-left: 30rpx; font-size: 30rpx; }
.cu-custom .cu-bar .border-custom text { display: block; flex: 1; margin: auto !important; text-align: center; font-size: 34rpx; }
.cu-bar .content { width: calc(100% - 440rpx);position: absolute; text-align: center; left: 0; right: 0; bottom: 0; top: 0; margin: auto; height: 60rpx; font-size: 32rpx; line-height: 60rpx; cursor: none; pointer-events: none; text-overflow: ellipsis; white-space: nowrap; o js部分
const App = getApp();
Component({
options: {
addGlobalClass: true,
multipleSlots: true
},
properties: {
isBack: {
type: [Boolean, String],
default: false
},
bgColor: { // 类名
type: String,
default: ''
},
bgImage: { // 仅⽀持⽹络地址
type: String,
default: ''
},
},
data: {
StatusBar: App.GlobalData.StatusBar,
CustomBar: App.GlobalData.CustomBar,
Custom: App.GlobalData.Custom,
isShare: App.GlobalData.share
},
methods: {
BackPage() {
wx.navigateBack({
delta: 1
});
},
toHome() {
url: '/pages/index/index',
})
}
}
})
app.js 判断是否分享
App({
GlobalData: {
share: false,
StatusBar: 0,
Custom: 0,
CustomBar: 0
},
onLaunch: function () {
let self = this
let systemInfo = wx.getSystemInfoSync()
self.GlobalData.StatusBar = systemInfo.statusBarHeight;
if (wx.getMenuButtonBoundingClientRect) {
let custom = wx.getMenuButtonBoundingClientRect();
self.GlobalData.Custom = custom;
self.GlobalData.CustomBar = custom.bottom + p - systemInfo.statusBarHeight;
}
})
因为组件css⾥不⽀持伪类元素所以写在 app.css
/* ⾃定义头部导航栏图标 */
.cu-custom [class*="icon-"] { font-family: "iconfont" !important; font-size: inherit; font-style: normal; }
@font-face {font-family: "iconfont";
src: url('?t=1555316650045'); /* IE9 */
src: url('?t=1555316650045#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANcAAsAAAAAB0wAAAMPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCLIIKATYCJAMMCwgABCAFhG0HPxtZBsiemjyKBSigJhHwFACGePCEutd3On3HX0oBgBz url('iconfont.woff?t=1555316650045') format('woff'),
url('f?t=1555316650045') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1555316650045#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont { font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }
.icon-homefill:before { content: "\e6fc"; }
.icon-back:before { content: "\e67a"; }
.cu-custom .cu-bar .border-custom::after { content: " "; width: 200%; height: 200%; position: absolute; top: 0; left: 0; border-radius: inherit; transform: scale(0.5); transform-origin: 0 0; pointer-events: none; box-sizing: border-box; border: 1rpx solid rgba(0,0,0,0.3); .cu-custom .cu-bar .border-custom::before { content: " "; width: 1rpx; height: 110%; position: absolute; top: 22.5%; left: 0; right: 0; margin: auto; transform: scale(0.5); transform-origin: 0 0; pointer-events: none; box-sizing: border-box; opacity: 0.6; background-co 开发⼯具显⽰不正常主要以真机显⽰为主具体可根据⾃⼰的需求修改
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论