微信小程序自定义头部导航栏（组件化）

站长资源 2024/11/26 佚名

2 0 1

本文实例为大家分享了微信小程序自定义头部导航栏的具体代码，供大家参考，具体内容如下

效果图

支持导航栏自定义背景颜色、背景图片支持返回文字自定义支持导航标题自定义

首先在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); }

开发工具显示不正常主要以真机显示为主具体可根据自己的需求修改

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

微信小程序,导航栏

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“微信小程序自定义头部导航栏（组件化）”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

微信小程序自定义头部导航栏（组件化）

在node环境下parse Smarty模板的使用示例代码

create-react-app中添加less支持的实现

评论“微信小程序自定义头部导航栏（组件化）”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接