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


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.jstree 增加节点的双击事件代码
Jul 27 Javascript
Js获取事件对象代码
Aug 05 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
jquery实现Ctrl+Enter提交表单的方法
Jul 21 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
JavaScript中如何调用Java方法
Sep 16 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 session有效期问题
2009/04/26 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php下连接mssql2005的代码
2011/01/17 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
JavaScript学习历程和心得小结
2010/08/16 Javascript
node.js中的http.response.end方法使用说明
2014/12/14 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
jquery不常用方法汇总
2015/07/26 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
mvc中form表单提交的三种方式(推荐)
2016/08/10 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
详解python之协程gevent模块
2018/06/14 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
Python列表元素删除和remove()方法详解
2021/01/04 Python
英国香水店:The Perfume Shop
2017/03/27 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
与C++相比,Java中的数组有什么不同
2014/03/25 面试题
初中物理教学反思
2014/01/14 职场文书
入党自荐书范文
2014/03/09 职场文书
推荐信怎么写
2014/05/09 职场文书
高三毕业评语
2014/12/31 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
vue实现锚点定位功能
2021/06/29 Vue.js
Java使用jmeter进行压力测试
2021/07/09 Java/Android
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA
html解决浏览器记住密码输入框的问题
2023/05/07 HTML / CSS