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


Posted in Javascript onNovember 15, 2019

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

效果图

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

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

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

首先在app.json window配置项添加

"window": {
 "navigationStyle": "custom"
 }

自定义头部导航栏代码

wxml部分

<view class="cu-custom" style="height:{{CustomBar}}px">
 <view class="cu-bar {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;{{bgImage?'background-image:url(' + 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?t=1555316650045'); /* IE9 */
 src: url('iconfont.eot?t=1555316650045#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAANcAAsAAAAAB0wAAAMPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCLIIKATYCJAMMCwgABCAFhG0HPxtZBsiemjyKBSigJhHwFACGePCEutd3On3HX0oBgBzCrQwwpxvBCDR2tgVzWmSLL1RJEo0V68AF6Bsg4wdCz0+7oQxuhxBSCRhLPW1+Ay6n/1+JzwPKbaxNY9OcFGCCAY21KZAHLpAEvWHsApdwHAI4amtJBg5+es1UsFjjBJDsDFXIVHImbEu6ECIENUtthuwgQWg2mhJge/h9+UP7QjAkFGvq2LvImf37vq6IVzDTJxDP5wDYKlCgJbAgs2tdU+XjaEuK0xQFPR8CLIKZKxDHhCJdEdh/eGAQkAArNRWApihm4DtXlKqHkrtOVQCCOGmmDDksXcWxtJFWjZOLo+97m+5UXPh55OpD782Kq9UuPmzkdeV+7zfvxfjzj1scPi7qNz+ucfhU3wPOmRUvOjpd+cy5TU+qGnfuXXVF21Tfd7hK2s/5zWcrLfo6uLj0lMky3G7tAf3+Nh96cqTdkZKAvt/mtErvN3SVSr9JXhz7eKT/52f5r37kwxXngld/KlVqW7XKmv39DxVVnratPbW3o0HNScOZw0H1BrtuNR/Q7DBquG5Ukw5bDkb76+2PNh8q15yu+yL1wrlpU887+4VpH7/nSzFXBoi/7WDNJAO6xrz4+7/BNMr8n9Pu+T/0FoAPzb0UyvrHQgww8b+umB4AdjCXWhG1QIvG9vWjTBg5yQAOB8TQV9638ZpKeioIIZVSGFKoBSWkIWlZLZHA0xEBIX3gaGHIak8FhfKITQLNrQUQyroOQ2meQynrNWlZX5Ggsn8IKJvCMbkKW3oal+EGFEIIINP8lDIkdhTHGtSi9GeooSV4WWnIfofn6wFq17ptMXELB94cM4oidVEcKBR5bNNgcBosiynfYwNSMEkPguuyTZuo7k2TBWxnagzgAUEAZGS+FMkgYQ7Fbx+olT7/DFQhi8BrqasJvgOPT++ctNNa2x7krcrpVXcvrxSJqBaKBRQk4mE2Mhg4wLKjjOTXDzKAJDCRPiJ8tdQGtYr6qibra+wPKGRNWHeqGFGx+KJ0DlPY7MEpR/McLdTnAAA=') format('woff2'),
 url('iconfont.woff?t=1555316650045') format('woff'),
 url('iconfont.ttf?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); 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); }

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery扩展插件Validate 5添加自定义验证方法
Sep 05 Javascript
jQuery插件scroll实现无缝滚动效果
Apr 27 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
微信小程序 如何保持登录状态
Aug 16 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
create-react-app中添加less支持的实现
Nov 15 #Javascript
taro小程序添加骨架屏的实现代码
Nov 15 #Javascript
详解Angular Karma测试的持续集成实践
Nov 15 #Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 #Javascript
JavaScript定时器常见用法实例分析
Nov 15 #Javascript
解决Layui 表格自适应高度的问题
Nov 15 #Javascript
layui前端时间戳转化实例
Nov 15 #Javascript
You might like
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
php共享内存段示例分享
2014/01/20 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
js 数组操作代码集锦
2009/04/28 Javascript
jquery插件之easing 动态菜单
2010/08/21 Javascript
javascript date格式化示例
2013/09/25 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
jQuery与vue实现拖动验证码功能
2018/01/30 jQuery
使用zrender.js绘制体温单效果
2019/10/31 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
python中去空格函数的用法
2014/08/21 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
使用50行Python代码从零开始实现一个AI平衡小游戏
2018/11/21 Python
Django框架模板的使用方法示例
2019/05/25 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
python实现连连看游戏
2020/02/14 Python
python thrift 实现 单端口多服务的过程
2020/06/08 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
python 用struct模块解决黏包问题
2020/11/07 Python
python中time.ctime()实例用法
2021/02/03 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
运动会通讯稿100字
2014/01/31 职场文书
给老婆的婚前保证书
2014/02/01 职场文书
2015新学期校长寄语(3篇)
2015/03/25 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL