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.
97 lines
1.8 KiB
97 lines
1.8 KiB
<template>
|
|
<view class="_navLayout" :style="{background: navBg,'height':_height}">
|
|
<view :style="{'height':_height3}"></view>
|
|
<view class="_nav-real" :style="{'height':_height2}">
|
|
<view class="_navText">登录</view>
|
|
<image class="_navIcon" src="../../static/wx_back.png">
|
|
</image>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "NavBar",
|
|
props: {
|
|
// 渐变透明使用此属性即可
|
|
// -webkit-linear-gradient(top, rgba(0,0,0,1)0%,rgba(0,0,0,0.5)66%, rgba(0,0,0,0)99%);
|
|
navBg: {
|
|
type: String,
|
|
default: "rgba(0,0,0,0.0)"
|
|
},
|
|
startChangeHeight: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
endChangeHeight: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
_height: '0px',
|
|
_height2: '0px',
|
|
_height3: '0px',
|
|
_right: '0px',
|
|
};
|
|
},
|
|
created() {
|
|
let navInfo = getApp().globalData.navInfo
|
|
this._height = navInfo.navHeight
|
|
this._height2 = navInfo.navUseHeight
|
|
this._height3 = navInfo.statusBarHeight
|
|
this._right = navInfo.navPaddingRight
|
|
console.log(this._height);
|
|
},
|
|
methods: {
|
|
alpha(res) {
|
|
|
|
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'
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
._navLayout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
position: sticky;
|
|
z-index: 999;
|
|
top: 0
|
|
}
|
|
|
|
._nav-real {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
._navText {
|
|
font-size: 13px;
|
|
}
|
|
|
|
._navIcon {
|
|
width: 23px;
|
|
height: 23px;
|
|
position: absolute;
|
|
left: 4px;
|
|
}
|
|
</style>
|