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


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 相关文章推荐
文本加密解密
Jun 23 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
jquery移除button的inline onclick事件(已测试及兼容浏览器)
Jan 25 Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
PHP结合jQuery实现红蓝投票功能特效
Jul 22 Javascript
如何实现JavaScript动态加载CSS和JS文件
Dec 28 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 Javascript
小程序自定义弹框效果
Nov 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jquery+json实现数据列表分页示例代码
2013/11/15 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
2019/07/19 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
python写入已存在的excel数据实例
2018/05/03 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
豪华床上用品 :Jennifer Adams
2019/09/15 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
手机业务员岗位职责
2013/12/13 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
售后求职信范文
2014/03/15 职场文书
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
房产继承公证书
2014/04/09 职场文书
求职信范文大全
2014/05/26 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
MySQL索引知识的一些小妙招总结
2021/05/10 MySQL