mac
2 years ago
1 changed files with 218 additions and 207 deletions
@ -1,208 +1,219 @@ |
|||
<template> |
|||
|
|||
<view> |
|||
|
|||
<!-- 左侧布局 --> |
|||
<view v-if="navStyle==='left'" class="_navLayout" |
|||
:style="{'background': navBackground,'height':navStatusHeight}"> |
|||
<!-- 状态栏 --> |
|||
<view :style="{'height':statusBarHeight}"></view> |
|||
<!-- 导航栏,去掉了不可用的宽度 --> |
|||
<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}"> |
|||
<view class="_navIcon2" > |
|||
<image src="../../static/wx_back.png" style="width: 20px;height: 20px;"></image> |
|||
</view> |
|||
<!-- 标题布局 --> |
|||
<view style="font-size: 17px;padding-left: 4px;">首页</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 居中布局 --> |
|||
<!-- ②这里不使用props改用data --> |
|||
<view v-if="navStyle==='center'" class="_navLayout" |
|||
:style="{'background': navBackground,'height':navStatusHeight}"> |
|||
<!-- 状态栏 --> |
|||
<view :style="{'height':statusBarHeight}"></view> |
|||
<!-- 导航栏,去掉了不可用的宽度 --> |
|||
<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}"> |
|||
<!-- 按键区域，占用为不可用的宽度 --> |
|||
<view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}"> |
|||
<image src="../../static/wx_back.png" style="width: 23px;height: 23px;"></image> |
|||
</view> |
|||
<!-- 标题布局 --> |
|||
<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}"> |
|||
{{navTitle}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* 全局默认背景透明，supportChange= false 会对默认色变成不透明 |
|||
*/ |
|||
const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)"; |
|||
|
|||
export default { |
|||
name: "NavBar", |
|||
props: { |
|||
color: { |
|||
type: String, |
|||
default: "white" |
|||
}, |
|||
// 标题 |
|||
navTitle: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 是否支持透明 |
|||
supportChange: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 背景色 |
|||
// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明 |
|||
navBg: { |
|||
type: String, |
|||
default: defaultTransparentBg |
|||
}, |
|||
// 渐变开始的高度 0->1 |
|||
startChangeHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 渐变停止的高度 |
|||
// ->1 |
|||
endChangeHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 显示icon |
|||
showIcon: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// ①用一个新的变量接收props属性 |
|||
navBackground: this.navBg, |
|||
navStatusHeight: 0, |
|||
statusBarHeight: 0, |
|||
navHeight: 0, |
|||
disableWidth: 0, |
|||
enableWidth: 0, |
|||
enableHeight: 0, |
|||
fontSize: 0, |
|||
navStyle: 'left' |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// mounted能拿到data值 |
|||
if (!this.supportChange) { |
|||
if (this.navBg === defaultTransparentBg) { |
|||
// 使用默认的时候由于是全透明，需要改成不透明 |
|||
// ③达到修改props属性的结果 |
|||
this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)") |
|||
} |
|||
} |
|||
// 赋值样式 |
|||
// this.navStyle = getApp().globalData.navInfo.navBar.style |
|||
}, |
|||
created() { |
|||
// create阶段能拿取到了props的值,需要使用this.变量名 |
|||
// 但是拿不到data的值 |
|||
// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用 |
|||
let navInfo = getApp().globalData.navInfo |
|||
// 总高度 |
|||
this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit |
|||
this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit |
|||
this.navHeight = navInfo.navBar.height + navInfo.unit |
|||
this.disableWidth = navInfo.navBar.disableWidth + navInfo.unit |
|||
this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit |
|||
this.enableHeight = navInfo.navBar.enableHeight + navInfo.unit |
|||
this.fontSize = navInfo.navBar.fontSize + navInfo.unit |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 自定义颜色渐变的值 |
|||
*/ |
|||
alpha(res) { |
|||
if (!this.supportChange) |
|||
return '1.0' |
|||
if (res.scrollTop > this.startChangeHeight) { |
|||
// 可以开始变化了 |
|||
if (res.scrollTop < this.endChangeHeight) { |
|||
return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + '' |
|||
} else { |
|||
// 保持长显示 |
|||
return '1.0' |
|||
} |
|||
} else { |
|||
// 保持无色 |
|||
return '0.0' |
|||
} |
|||
}, |
|||
/** |
|||
* 提供默认的颜色变化功能 |
|||
*/ |
|||
defaultColorBgAlpha(res) { |
|||
let x = this.alpha(res) |
|||
this.navBackground = "linear-gradient(89.26deg, rgba(254,144,56," + x + |
|||
") 0.75%,rgba(255,177,118," + x + ") 99.78%)" |
|||
}, |
|||
clickIcon() { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._navLayout { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
z-index: 999; |
|||
top: 0; |
|||
position: fixed; |
|||
} |
|||
|
|||
._nav-real { |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
align-items: center; |
|||
} |
|||
|
|||
._nav-title { |
|||
text-align: center; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
color: white; |
|||
} |
|||
|
|||
._navIcon { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding-left: 3px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
._navIcon2 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
margin-left: 10px; |
|||
flex-shrink: 0; |
|||
padding-right: 4px; |
|||
} |
|||
<template> |
|||
|
|||
<view> |
|||
|
|||
<!-- 左侧布局 --> |
|||
<view v-if="navStyle==='left'" class="_navLayout" |
|||
:style="{'background': navBackground,'height':navStatusHeight}"> |
|||
<!-- 状态栏 --> |
|||
<view :style="{'height':statusBarHeight}"></view> |
|||
<!-- 导航栏,去掉了不可用的宽度 --> |
|||
<view class="_nav-real" |
|||
:style="{'height':navHeight,'width':'calc('+enableWidth+' - 9px)' ,'margin-left':'9px','background':'red'}"> |
|||
<view class="_navIcon2"> |
|||
<image src="../../static/wx_back.png" style="width: 20px;height: 20px;"></image> |
|||
</view> |
|||
<!-- 标题布局 --> |
|||
<view class="_nav-title2" :style="{'font-size':fontSize}">>{{navTitle}}</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 居中布局 --> |
|||
<!-- ②这里不使用props改用data --> |
|||
<view v-if="navStyle==='center'" class="_navLayout" |
|||
:style="{'background': navBackground,'height':navStatusHeight}"> |
|||
<!-- 状态栏 --> |
|||
<view :style="{'height':statusBarHeight}"></view> |
|||
<!-- 导航栏,去掉了不可用的宽度 --> |
|||
<view class="_nav-real" :style="{'height':navHeight,'width':enableWidth}"> |
|||
<!-- 按键区域，占用为不可用的宽度 --> |
|||
<view class="_navIcon" :style="{'width':disableWidth,'height':navHeight}"> |
|||
<image src="../../static/wx_back.png" style="width: 23px;height: 23px;"></image> |
|||
</view> |
|||
<!-- 标题布局 --> |
|||
<view class="_nav-title" :style="{'height':navHeight,'line-height':navHeight,'font-size':fontSize}"> |
|||
{{navTitle}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view v-if="!supportChange" :style="{'height':navStatusHeight}"></view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
/** |
|||
* 全局默认背景透明，supportChange= false 会对默认色变成不透明 |
|||
*/ |
|||
const defaultTransparentBg = "linear-gradient(89.26deg, rgba(254,144,56,0) 0.75%,rgba(255,177,118,0) 99.78%)"; |
|||
|
|||
export default { |
|||
name: "NavBar", |
|||
props: { |
|||
color: { |
|||
type: String, |
|||
default: "white" |
|||
}, |
|||
// 标题 |
|||
navTitle: { |
|||
type: String, |
|||
default: "" |
|||
}, |
|||
// 是否支持透明 |
|||
supportChange: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
// 背景色 |
|||
// 默认橘色渐变全透明，如果supportChange=false，默认为橘色渐变不透明 |
|||
navBg: { |
|||
type: String, |
|||
default: defaultTransparentBg |
|||
}, |
|||
// 渐变开始的高度 0->1 |
|||
startChangeHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 渐变停止的高度 |
|||
// ->1 |
|||
endChangeHeight: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 显示icon |
|||
showIcon: { |
|||
type: Boolean, |
|||
default: true |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
// ①用一个新的变量接收props属性 |
|||
navBackground: this.navBg, |
|||
navStatusHeight: 0, |
|||
statusBarHeight: 0, |
|||
navHeight: 0, |
|||
disableWidth: 0, |
|||
enableWidth: 0, |
|||
enableHeight: 0, |
|||
fontSize: 0, |
|||
navStyle: 'left' |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// mounted能拿到data值 |
|||
if (!this.supportChange) { |
|||
if (this.navBg === defaultTransparentBg) { |
|||
// 使用默认的时候由于是全透明，需要改成不透明 |
|||
// ③达到修改props属性的结果 |
|||
this.navBackground = defaultTransparentBg.replaceAll(",0)", ",1)") |
|||
} |
|||
} |
|||
// 赋值样式 |
|||
this.navStyle = getApp().globalData.navInfo.navBar.style |
|||
}, |
|||
created() { |
|||
// create阶段能拿取到了props的值,需要使用this.变量名 |
|||
// 但是拿不到data的值 |
|||
// 可以拿到script标签的全局属性,不要使用this，直接变量名就可以使用 |
|||
let navInfo = getApp().globalData.navInfo |
|||
// 总高度 |
|||
this.navStatusHeight = navInfo.navStatusHeight + navInfo.unit |
|||
this.statusBarHeight = navInfo.statusBarHeight + navInfo.unit |
|||
this.navHeight = navInfo.navBar.height + navInfo.unit |
|||
this.disableWidth = navInfo.navBar.disableWidth + navInfo.unit |
|||
this.enableWidth = navInfo.navBar.enableWidth + navInfo.unit |
|||
this.enableHeight = navInfo.navBar.enableHeight + navInfo.unit |
|||
this.fontSize = navInfo.navBar.fontSize + navInfo.unit |
|||
}, |
|||
methods: { |
|||
/** |
|||
* 自定义颜色渐变的值 |
|||
*/ |
|||
alpha(res) { |
|||
if (!this.supportChange) |
|||
return '1.0' |
|||
if (res.scrollTop > this.startChangeHeight) { |
|||
// 可以开始变化了 |
|||
if (res.scrollTop < this.endChangeHeight) { |
|||
return (1 - ((this.endChangeHeight - res.scrollTop) / 100)) + '' |
|||
} else { |
|||
// 保持长显示 |
|||
return '1.0' |
|||
} |
|||
} else { |
|||
// 保持无色 |
|||
return '0.0' |
|||
} |
|||
}, |
|||
/** |
|||
* 提供默认的颜色变化功能 |
|||
*/ |
|||
defaultColorBgAlpha(res) { |
|||
let x = this.alpha(res) |
|||
this.navBackground = "linear-gradient(89.26deg, rgba(254,144,56," + x + |
|||
") 0.75%,rgba(255,177,118," + x + ") 99.78%)" |
|||
}, |
|||
clickIcon() { |
|||
uni.navigateBack() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
._navLayout { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
z-index: 999; |
|||
top: 0; |
|||
position: fixed; |
|||
} |
|||
|
|||
._nav-real { |
|||
display: flex; |
|||
flex-direction: row; |
|||
width: 100%; |
|||
align-items: center; |
|||
} |
|||
|
|||
._nav-title { |
|||
text-align: center; |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
color: white; |
|||
} |
|||
|
|||
._nav-title2 { |
|||
text-overflow: ellipsis; |
|||
overflow: hidden; |
|||
word-break: break-all; |
|||
white-space: nowrap; |
|||
width: 100%; |
|||
color: white; |
|||
padding-left: 5px; |
|||
flex: 1; |
|||
} |
|||
|
|||
._navIcon { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
padding-left: 3px; |
|||
flex-shrink: 0; |
|||
} |
|||
|
|||
._navIcon2 { |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
flex-shrink: 0; |
|||
padding-right: 6px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue