uniapp封装自定义头部

兼容h5和微信小程序自定义头部，动态设置固定定位、定位时是否占位、背景透明度、背景颜色、点击事件、是否包含系统栏、分割线、自定义样式

有更好的建议或需求欢迎指出，谢谢

<template><view><view v-if="isStatusBar" class="status-bar" :style="'height:'+statusBarHeight+'px'"><!-- 状态栏背景,设置为不透明 --></view><view v-if="isFixed && isOccupy" class="top-header" :style="'height:'+topHeight+'px'"><!-- 头部占位 --></view><view v-else-if="isStatusBar" class="top-header" :style="'height:'+statusBarHeight+'px'"><!-- 状态栏占位 --></view><!-- 头部     --><view class="nav-bar" :class="{ 'activeIsFixed': isFixed }" :style="getNavBarStyle"><view class="back" v-if="isBack" @click="back"><view class="iconfont icon-31fanhui1"></view></view><view class="left" v-else-if="!onlyCenter" @click="leftClick"><slot name="left"></slot></view><view class="center" :class="isOnlyCenter" :style="'height:'+navbarHeight+'px'"><slot></slot></view><view class="right" @click="rightClick" v-if="!onlyCenter"><slot name="right"></slot></view></view></view>
</template><script>/*** NavBar 自定义头部* @description 头部组件，主要用于头部导航* @property {Number, String} color 图标和文字颜色* @property {String} isBack 是否显示返回按钮* @property {Boolean} isFixed  是否固定顶部* @property {Boolean} onlyCenter  是否只显示中间部分* @property {String} bgColor  背景颜色* @property {Number} opacity 背景透明度* @property {Boolean} isOccupy 固定时默认占位* @property {Boolean} isStatusBar 默认包含系统状态栏* @property {Boolean} isSplitLine 头部分割线* @property {String} splitLineColor 头部分割线颜色* @property {Number} splitLineHeight 头部分割线高度* @property {String} styleSelf 自定义样式* @event {Function} back 返回* @event {Function} leftClick 左侧点击事件* @event {Function} rightClick 右侧点击事件*/export default {name: "Header",data() {return {//状态栏高度statusBarHeight: 0,//状态栏加头部高度topHeight: 0,navbarHeight: this.propNavbarHeight};},props: {// 头部高度propNavbarHeight: {type: [Number, String],default: 42},// 显示返回按钮isBack: {type: [Boolean, String],default: false},// 是否固定定位isFixed: {type: [Boolean, String],default: true},// 是否只显示中间部分onlyCenter: {type: [Boolean, String],default: false},// 背景颜色bgColor: {type: String,default: "pink"},// 背景透明度opacity: {type: [Number, String],default: 1},// 固定时默认占位isOccupy: {type: [Boolean, String],default: true},// 默认包含系统状态栏isStatusBar: {type: [Boolean, String],default: true},// 头部分割线 isSplitLine: {type: [Boolean, String],default: true},// 头部分割线颜色splitLineColor: {type: String,default: "#CCCCCC"},// 头部分割线高度splitLineHeight: {type: [Number, String],default: 1},// 字体颜色color: {type: String,default: ""},// 自定义样式styleSelf: {type: String,default: () => {return ""}}},mounted() {this.getSystemInfo()},computed: {// 中间部分样式isOnlyCenter() {return this.onlyCenter ? 'onlyCenter' : ''},// 头部样式getNavBarStyle() {let splitLine = this.isSplitLine ?`border-bottom: ${Number(this.splitLineHeight)}px solid ${this.splitLineColor};` : "";let top = this.isFixed ? `top:${Number(this.statusBarHeight)}px;` : "";let bgColor = Number(this.opacity) === 0 ? "" : `background-color:${this.bgColor};`;return `height:${Number(this.navbarHeight)}px;line-height:${Number(this.navbarHeight)}px;background:rgba(255,255,255,${Number(this.opacity)});color:${this.color};${bgColor}${top}${splitLine}${this.styleSelf}`}},methods: {// 返回back() {uni.navigateBack({})},rightClick() {this.$emit("rightClick")},leftClick() {this.$emit("leftClick")},//获取状态栏高度getSystemInfo() {uni.getSystemInfo({success: res => {this.statusBarHeight = res.statusBarHeight// #ifdef MP-WEIXIN // 让胶囊居中const custom = wx.getMenuButtonBoundingClientRect()this.navbarHeight = custom.height + (custom.top - res.statusBarHeight) * 2// #endifif (this.isStatusBar === false) this.statusBarHeight = 0this.topHeight = this.statusBarHeight + this.navbarHeight}})}}}
</script><style scoped>.status-bar {width: 100vw;position: fixed;top: 0;left: 0;right: 0;z-index: 9;background-color: #ffffff;opacity: 1}.nav-bar {display: flex;font-size: 16px;width: 100vw;}.back,.left,.right {width: 42px;height: 42px;display: flex;align-items: center;justify-content: center;}.center {flex: 1;display: flex;align-items: center;justify-content: center;}.top-header {position: relative;top: 0;width: 100%;}.activeIsFixed {position: fixed;right: 0;left: 0;z-index: 99;}.activeBgColor {border: solid 1px transparent;background-image: linear-gradient(#ffffff, #ffffff),linear-gradient(to right, #FF007F 0%, #00A0E9 100%);border-radius: 25px;background-clip: content-box, border-box;background-origin: border-box;}.onlyCenter {margin: 0 10px;}
</style>

uniapp封装自定义头部相关推荐

uni-app封装自定义支付密码键盘组件及使用方法（附效果图）
先看一下效果吧部分代码  <uni-pay-password :show="show" @close="tapClose&q ...
uniapp 封装时间选择器组件
背景项目使用的ui框架为uView UI,因项目功能需求需要实现时间选择器可以选择秒,但是uview不支持,所以自行解决. 最终版是基于uview UI的时间组件代码做修改,实现功能. 基于unia ...
微信小程序自定义头部导航nav
1.封装自定义nav导航组件 // app.js App({globalData: {systeminfo: false, //系统信息headerBtnPosi: false //头部菜单高度} } ...
Android uni-app 封装原生插件
前言据广大用户的需求,需要把我们anyRTC的SDK,封装到uni-app来使用,并且实现音视频通话.这边文章图文讲解一下怎么封装原生插件,并且在下一章uni-app实现音视频通话. anyRTC开 ...
uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
小程序中自定义头部标题栏
小程序最开始只能全局定义头部标题栏,也就是说一旦你想某个页面自定义头部标题栏,那么所有的页面都需要重新定义(也就是所有页面都需要重写头部标题栏): 但现在新版本的微信已经开放了可以单页面自定义头部标题 ...
封装自定义的redis切库工具类ByteArrayRedisTemplate，读取byte数组反序列化成List＜Object＞
封装自定义的redis切库工具类ByteArrayRedisTemplate,读取byte数组反序列化成List<Object>(使用lettuce连接池) 代码环境框架:springb ...
uniapp中自定义showToast样式
uniapp中自定义showToast样式使用方式在template中引入在需要使用show-toast的地方使用在main.js中挂在组件文件代码:组件show-toast show-to ...
uniapp封装方法
uniapp封装方法参考:https://www.cnblogs.com/gqx-html/p/10967570.html 根据报错和实际情况作了一些修改 1.环境配置 common文件夹下新建co ...

uniapp封装自定义头部

uniapp封装自定义头部相关推荐

最新文章

热门文章