幽灵资源网 Design By www.bzswh.com
本文实例为大家分享了微信小程序自定义头部导航栏的具体代码,供大家参考,具体内容如下
效果图
支持 导航栏自定义背景颜色、背景图片 支持返回文字自定义 支持导航标题自定义
首先在app.json window配置项添加
"window": { "navigationStyle": "custom" }
自定义头部导航栏代码
wxml部分
<view class="cu-custom" style="height:{{CustomBar}}px"> <view class="cu-bar {{bgImage!=''" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage"> <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}}" style="width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)"> <text class="icon-back" bindtap="BackPage"></text> <text class="icon-homefill" bindtap="toHome"></text> </view> <view class="content" style="top:{{StatusBar}}px"> <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; width: 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; overflow: hidden; }
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() { wx.reLaunch({ 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 + custom.top - 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('iconfont.eot"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); opacity: 0.5; } .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-color: rgba(0,0,0,0.3); }
开发工具显示不正常 主要以真机显示为主 具体可根据自己的需求修改
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,导航栏
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...