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) {