You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< template >
< view >
< view class = "cu-custom" : style = "[{ height: customBar + 'px' }]" >
< view class = "cu-bar u-flex u-row-between" : class = "{ fixed: isFixed }" :style ="[style]" >
< view class = "action u-flex" @tap ="goBack" v-if ="isBack" >
< view class = "u-iconfont" : class = "'uicon-' + backIconName" : style = "{ color: backIconColor, fontSize: backIconSize + 'rpx' }" > < / view >
< view class = "u-back-text u-line-1 u-m-l-20" v-if ="backText" :style="[backTextStyle]">{{ backText || '' }}</view>
</view>
<view class="content" :style="[{ top: statusBarHeight + 'px' }]"><slot name="content"></slot></view>
<slot name="right" > < / slot >
< / view >
< / view >
< / view >
< / template >
< script >
/**
* shopro-navbar -自定义标题栏
* @property {Boolean} isBack = [true] - 是否显示返回按钮
* @property {Booelan} isFixed = [true] - 是否开启定位
*/
// 获取系统状态栏的高度
let systemInfo = uni . getSystemInfoSync ( ) ;
let menuButtonInfo = { } ;
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni . getMenuButtonBoundingClientRect ( ) ;
// #endif
export default {
name : 'shopro-tabbar' ,
data ( ) {
return {
statusBarHeight : systemInfo . statusBarHeight
} ;
} ,
computed : {
// tabbar样式
style ( ) {
let statusBarHeight = systemInfo . statusBarHeight ;
let style = { } ;
style . height = ` ${ this . customBar } px ` ;
style . paddingTop = ` ${ statusBarHeight } px ` ;
Object . assign ( style , this . background ) ;
return style ;
} ,
// 高度
customBar ( ) {
let statusBarHeight = systemInfo . statusBarHeight ;
// #ifndef MP
return systemInfo . platform == 'android' ? statusBarHeight + 50 : statusBarHeight + 45 ;
// #endif
// #ifdef MP-WEIXIN
return menuButtonInfo . bottom + menuButtonInfo . top - statusBarHeight ;
// #endif
// #ifdef MP-ALIPAY
return statusBarHeight + systemInfo . titleBarHeight ;
// #endif
}
} ,
props : {
isBack : {
type : Boolean ,
default : true
} ,
isFixed : {
type : Boolean ,
default : true
} ,
background : {
type : Object ,
default ( ) {
return {
background : '#ffffff'
} ;
}
} ,
// 返回箭头的颜色
backIconColor : {
type : String ,
default : '#606266'
} ,
// 左边返回的图标
backIconName : {
type : String ,
default : 'arrow-left'
} ,
// 左边返回图标的大小，
backIconSize : {
type : [ String , Number ] ,
default : '44'
} ,
// 返回的文字提示
backText : {
type : String ,
default : ''
} ,
// 返回的文字的 样式
backTextStyle : {
type : Object ,
default ( ) {
return {
color : '#606266'
} ;
}
}
} ,
methods : {
goBack ( ) {
uni . navigateBack ( ) ;
}
}
} ;
< / script >
< style lang = "scss" scoped >
. cu - custom {
width : 100 % ;
}
. cu - bar {
width : 100 % ;
. content {
width : 560 rpx ;
display : flex ;
flex - direction : row ;
flex : 1 ;
align - items : center ;
pointer - events : auto ;
}
}
< / style >
