diff --git a/src/core/view/bridge/subscribe/index.js b/src/core/view/bridge/subscribe/index.js
index ed58a32a8bd73c94476c48a96cefafdcc57cb25a..2be7605d3293d77cb6bf7c0978520be84ad2e6f0 100644
--- a/src/core/view/bridge/subscribe/index.js
+++ b/src/core/view/bridge/subscribe/index.js
@@ -27,7 +27,7 @@ const passiveOptions = supportsPassive ? {
function updateCssVar (vm) {
if (uni.canIUse('css.var')) {
const pageVm = vm.$parent.$parent
- const windowTop = pageVm.showNavigationBar && pageVm.navigationBar.type !== 'transparent' ? (NAVBAR_HEIGHT +
+ const windowTop = pageVm.showNavigationBar && pageVm.navigationBar.type !== 'transparent' && pageVm.navigationBar.type !== 'alwaysTransparent' ? (NAVBAR_HEIGHT +
'px')
: '0px'
const windowBottom = getApp().$children[0].showTabBar ? (TABBAR_HEIGHT + 'px') : '0px'
@@ -74,8 +74,8 @@ export default function initSubscribe (subscribe) {
const enablePageReachBottom = hasLifecycleHook(vm.$options, 'onReachBottom')
const onReachBottomDistance = pageVm.onReachBottomDistance
- const enableTransparentTitleNView = isPlainObject(pageVm.titleNView) && pageVm.titleNView.type ===
- 'transparent'
+ const enableTransparentTitleNView = (isPlainObject(pageVm.titleNView) && pageVm.titleNView.type ===
+ 'transparent') || (isPlainObject(pageVm.navigationBar) && pageVm.navigationBar.type === 'transparent')
if (scrollListener) {
document.removeEventListener('scroll', scrollListener)
diff --git a/src/platforms/h5/components/page/index.vue b/src/platforms/h5/components/page/index.vue
index 146311b44a8cfbca9949488ec575c9f8311ba818..67d789b14cda1a081bf880d0eeb1377bd553af36 100644
--- a/src/platforms/h5/components/page/index.vue
+++ b/src/platforms/h5/components/page/index.vue
@@ -136,9 +136,19 @@ export default {
titleImage: {
type: String,
default: ''
+ },
+ transparentTitle: {
+ type: String,
+ default: 'none'
}
},
- data () {
+ data () {
+ const titleNViewTypeList = {
+ 'none': 'default',
+ 'auto': 'transparent',
+ 'always': 'alwaysTransparent'
+ }
+
const navigationBar = mergeTitleNView({
loading: false,
backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
@@ -147,7 +157,8 @@ export default {
titleText: this.navigationBarTitleText,
titleImage: this.titleImage,
duration: '0',
- timingFunc: ''
+ timingFunc: '',
+ type: titleNViewTypeList[this.transparentTitle]
}, this.titleNView)
const showNavigationBar = this.navigationStyle === 'default' && this.titleNView
diff --git a/src/platforms/h5/components/page/pageHead.vue b/src/platforms/h5/components/page/pageHead.vue
index 32b4b5770b32385f176b1d94a31002575009fa7d..a235c2f0fc8557b5b25587ff043fbfcaa62f5edc 100644
--- a/src/platforms/h5/components/page/pageHead.vue
+++ b/src/platforms/h5/components/page/pageHead.vue
@@ -36,7 +36,7 @@
v-if="!searchInput"
class="uni-page-head-bd">
@@ -277,7 +277,7 @@ uni-page-head .uni-page-head__title .uni-loading {
uni-page-head .uni-page-head__title .uni-page-head__title_image {
width: auto;
- height: 20px;
+ height: 26px;
vertical-align: middle;
}
@@ -335,7 +335,7 @@ export default {
type: {
default: 'default',
validator (value) {
- return ['default', 'transparent'].indexOf(value) !== -1
+ return ['default', 'transparent', 'alwaysTransparent'].indexOf(value) !== -1
}
},
coverage: {
diff --git a/src/platforms/h5/components/page/transparent.js b/src/platforms/h5/components/page/transparent.js
index acfc895c064bd67b64cf740e1ca97217ba5f543a..db48294965404593589d331a88b4b0cb261622de 100644
--- a/src/platforms/h5/components/page/transparent.js
+++ b/src/platforms/h5/components/page/transparent.js
@@ -6,7 +6,7 @@ export default {
mounted () {
if (this.type === 'transparent') {
const transparentElemStyle = this.$el.querySelector('.uni-page-head-transparent').style
- const titleElem = this.$el.querySelector('.uni-page-head__title')
+ // const titleElem = this.$el.querySelector('.uni-page-head__title')
const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
const iconElemsStyles = []
const textColor = this.textColor
@@ -40,9 +40,10 @@ export default {
}
this._A = alpha
// TODO 暂时仅处理背景色
- if (titleElem) {
- titleElem.style.opacity = alpha
- }
+ // 对齐支付宝小程序,标题不透明渐变
+ // if (titleElem) {
+ // titleElem.style.opacity = alpha
+ // }
transparentElemStyle.backgroundColor = `rgba(${this._R},${this._G},${this._B},${alpha})`
borderRadiusElemsStyles.forEach(function (borderRadiusElemStyle, index) {
let oldColor = oldColors[index]
@@ -52,17 +53,31 @@ export default {
borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
})
})
+ } else if (this.type === 'alwaysTransparent') {
+ const iconElems = this.$el.querySelectorAll('.uni-btn-icon')
+ const iconElemsStyles = []
+ for (let i = 0; i < iconElems.length; i++) {
+ iconElemsStyles.push(iconElems[i].style)
+ }
+ const borderRadiusElems = this.$el.querySelectorAll('.uni-page-head-btn')
+ const oldColors = []
+ const borderRadiusElemsStyles = []
+ for (let i = 0; i < borderRadiusElems.length; i++) {
+ let borderRadiusElem = borderRadiusElems[i]
+ oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
+ borderRadiusElemsStyles.push(borderRadiusElem.style)
+ }
}
},
computed: {
color () {
- return this.type === 'transparent' ? '#fff' : this.textColor
+ return this.type === 'transparent' || this.type === 'alwaysTransparent' ? '#fff' : this.textColor
},
offset () {
return parseInt(this.coverage)
},
bgColor () {
- if (this.type === 'transparent') {
+ if (this.type === 'transparent' || this.type === 'alwaysTransparent') {
const {
r,
g,
diff --git a/src/platforms/h5/helpers/get-window-offset.js b/src/platforms/h5/helpers/get-window-offset.js
index 6137bd3af08781b8eac4f00171d169aaa765b458..a1359d74b6d897ba2999e3cbf386540d18f27d03 100644
--- a/src/platforms/h5/helpers/get-window-offset.js
+++ b/src/platforms/h5/helpers/get-window-offset.js
@@ -17,7 +17,7 @@ export default function getWindowOffset () {
const pages = getCurrentPages()
if (pages.length) {
const pageVm = pages[pages.length - 1].$parent.$parent
- top = pageVm.showNavigationBar && pageVm.navigationBar.type !== 'transparent' ? NAVBAR_HEIGHT : 0
+ top = pageVm.showNavigationBar && (pageVm.navigationBar.type !== 'transparent' || pageVm.navigationBar.type !== 'alwaysTransparent') ? NAVBAR_HEIGHT : 0
}
const app = getApp()
if (app) {