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


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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
jQuery打字效果实现方法(附demo源码下载)
Dec 18 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
2006/11/25 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
用Juery网页选项卡实现代码
2011/06/13 Javascript
jquery的map与get方法详解
2013/11/04 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
vue2.X组件学习心得(新手必看篇)
2017/07/05 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python深入学习之特殊方法与多范式
2014/08/31 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Windows下安装python MySQLdb遇到的问题及解决方法
2017/03/16 Python
pyspark 随机森林的实现
2020/04/24 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
美国智能家居专家:tink
2019/06/04 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
公务员诚信承诺书
2014/05/26 职场文书
就业协议书
2014/09/12 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android