Skip to content

U
uni-app

qianlong66 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 f14d8d3c 编写于 作者: fxy060608's avatar fxy060608
浏览文件
操作

feat: pageHead

上级 5196a2c6
展开全部 隐藏空白更改
内联 并排
Showing with 1213 addition and 11168 deletion
packages/global.d.ts
浏览文件 @ f14d8d3c
......@@ -29,6 +29,7 @@ declare var __UNI_FEATURE_PULL_DOWN_REFRESH__: boolean
declare var __UNI_FEATURE_NAVIGATIONBAR__: boolean
declare var __UNI_FEATURE_NAVIGATIONBAR_BUTTONS__: boolean
declare var __UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__: boolean
declare var __UNI_FEATURE_NAVIGATIONBAR_TRANSPARENT__: boolean
// TODO
declare var __uniRoutes: any
declare var __uniConfig: UniApp.UniConfig
......
packages/shims-uni-app.d.ts
浏览文件 @ f14d8d3c
......@@ -12,6 +12,7 @@ declare namespace UniApp {
interface UniConfig {
router: {
strict: boolean
base: string
}
globalStyle: {
navigationBar: PageNavigationBar
......@@ -48,6 +49,7 @@ declare namespace UniApp {
}
interface PageNavigationBarSearchInput {
color?: string
autoFocus?: boolean
align?: 'center' | 'left' | 'right'
backgroundColor?: string
......@@ -60,7 +62,8 @@ declare namespace UniApp {
interface PageNavigationBar {
type?: 'default' | 'transparent' | 'float' | 'none'
titleText?: string
textStyle?: 'black' | 'white'
titleImage?: string
titleColor?: '#000' | '#fff'
timingFunc?: string
duration?: string
backgroundColor?: string
......@@ -70,6 +73,8 @@ declare namespace UniApp {
buttons?: PageNavigationBarButton[]
searchInput?: PageNavigationBarSearchInput
style?: 'default' | 'custom'
loading?: boolean
coverage?: string
}
interface PageRefreshOptions {
support: boolean
......
packages/uni-h5/dist/assets/index-81a48a08.css → packages/uni-components/dist/assets/index-56f8ba50.css
浏览文件 @ f14d8d3c
......@@ -557,79 +557,6 @@ uni-image>.uni-image-will-change {
will-change: transform;
}
uni-input {
display: block;
font-size: 16px;
line-height: 1.4em;
height: 1.4em;
min-height: 1.4em;
overflow: hidden;
}
uni-input[hidden] {
display: none;
}
.uni-input-wrapper,
.uni-input-placeholder,
.uni-input-form,
.uni-input-input {
outline: none;
border: none;
padding: 0;
margin: 0;
text-decoration: inherit;
}
.uni-input-wrapper,
.uni-input-form {
display: flex;
position: relative;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
.uni-input-placeholder,
.uni-input-input {
width: 100%;
}
.uni-input-placeholder {
position: absolute;
top: auto !important;
left: 0;
color: gray;
overflow: hidden;
text-overflow: clip;
white-space: pre;
word-break: keep-all;
pointer-events: none;
line-height: inherit;
}
.uni-input-input {
display: block;
height: 100%;
background: none;
color: inherit;
opacity: 1;
-webkit-text-fill-color: currentcolor;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
text-align: inherit;
text-indent: inherit;
text-transform: inherit;
text-shadow: inherit;
}
.uni-input-input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.uni-input-input::-webkit-outer-spin-button,
.uni-input-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.uni-input-input[type="number"] {
-moz-appearance: textfield;
}
.uni-label-pointer {
cursor: pointer;
}
......@@ -1033,48 +960,3 @@ uni-textarea[hidden] {
right: 0;
margin: 0 -3px;
}
uni-view {
display: block;
}
uni-view[hidden] {
display: none;
}
uni-page-wrapper {
display: block;
height: 100%;
position: relative;
}
uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper {
height: calc(100% - 44px);
height: calc(100% - 44px - constant(safe-area-inset-top));
height: calc(100% - 44px - env(safe-area-inset-top));
}
uni-page-body {
display: block;
box-sizing: border-box;
width: 100%;
}
.uni-async-error {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
color: #999;
padding: 100px 10px;
text-align: center;
}
.uni-async-loading {
box-sizing: border-box;
width: 100%;
padding: 50px;
text-align: center;
}
.uni-async-loading .uni-loading {
width: 30px;
height: 30px;
}
packages/uni-components/src/components/input/index.vue
浏览文件 @ f14d8d3c
......@@ -230,86 +230,3 @@ export default {
}
}
</script>
<style>
uni-input {
display: block;
font-size: 16px;
line-height: 1.4em;
height: 1.4em;
min-height: 1.4em;
overflow: hidden;
}
uni-input[hidden] {
display: none;
}
.uni-input-wrapper,
.uni-input-placeholder,
.uni-input-form,
.uni-input-input {
outline: none;
border: none;
padding: 0;
margin: 0;
text-decoration: inherit;
}
.uni-input-wrapper,
.uni-input-form {
display: flex;
position: relative;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
.uni-input-placeholder,
.uni-input-input {
width: 100%;
}
.uni-input-placeholder {
position: absolute;
top: auto !important;
left: 0;
color: gray;
overflow: hidden;
text-overflow: clip;
white-space: pre;
word-break: keep-all;
pointer-events: none;
line-height: inherit;
}
.uni-input-input {
display: block;
height: 100%;
background: none;
color: inherit;
opacity: 1;
-webkit-text-fill-color: currentcolor;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
text-align: inherit;
text-indent: inherit;
text-transform: inherit;
text-shadow: inherit;
}
.uni-input-input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.uni-input-input::-webkit-outer-spin-button,
.uni-input-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.uni-input-input[type="number"] {
-moz-appearance: textfield;
}
</style>
packages/uni-components/src/components/view/index.vue
浏览文件 @ f14d8d3c
......@@ -14,15 +14,6 @@
</uni-view>
</template>
<style>
uni-view {
display: block;
}
uni-view[hidden] {
display: none;
}
</style>
<script>
import hover from '../../mixins/hover'
export default {
......
packages/uni-components/src/helpers/icon.ts 0 → 100644
浏览文件 @ f14d8d3c
import { createVNode } from 'vue'
export const ICON_PATH_CANCEL =
'M20.928 10.176l-4.928 4.928-4.928-4.928-0.896 0.896 4.928 4.928-4.928 4.928 0.896 0.896 4.928-4.928 4.928 4.928 0.896-0.896-4.928-4.928 4.928-4.928-0.896-0.896zM16 2.080q-3.776 0-7.040 1.888-3.136 1.856-4.992 4.992-1.888 3.264-1.888 7.040t1.888 7.040q1.856 3.136 4.992 4.992 3.264 1.888 7.040 1.888t7.040-1.888q3.136-1.856 4.992-4.992 1.888-3.264 1.888-7.040t-1.888-7.040q-1.856-3.136-4.992-4.992-3.264-1.888-7.040-1.888zM16 28.64q-3.424 0-6.4-1.728-2.848-1.664-4.512-4.512-1.728-2.976-1.728-6.4t1.728-6.4q1.664-2.848 4.512-4.512 2.976-1.728 6.4-1.728t6.4 1.728q2.848 1.664 4.512 4.512 1.728 2.976 1.728 6.4t-1.728 6.4q-1.664 2.848-4.512 4.512-2.976 1.728-6.4 1.728z'
export const ICON_PATH_CIRCLE =
'M16.032 1.888q-3.84 0-7.136 1.92-3.2 1.888-5.088 5.088-1.92 3.296-1.92 7.136t1.92 7.136q1.888 3.168 5.088 5.056 3.296 1.92 7.136 1.92t7.104-1.92q3.2-1.888 5.088-5.056 1.92-3.296 1.92-7.136t-1.92-7.136q-1.888-3.2-5.088-5.088-3.264-1.92-7.104-1.92zM16.032 29.056q-3.52 0-6.528-1.76-2.912-1.696-4.64-4.608-1.76-3.008-1.76-6.512t1.76-6.512q1.728-2.944 4.64-4.64 3.008-1.76 6.512-1.76t6.512 1.76q2.912 1.696 4.64 4.64 1.76 3.008 1.76 6.512t-1.76 6.512q-1.728 2.912-4.64 4.608-3.008 1.76-6.496 1.76z'
export const ICON_PATH_CLEAR =
'M16 0q-4.352 0-8.064 2.176-3.616 2.144-5.76 5.76-2.176 3.712-2.176 8.064t2.176 8.064q2.144 3.616 5.76 5.76 3.712 2.176 8.064 2.176t8.064-2.176q3.616-2.144 5.76-5.76 2.176-3.712 2.176-8.064t-2.176-8.064q-2.144-3.616-5.76-5.76-3.712-2.176-8.064-2.176zM22.688 21.408q0.32 0.32 0.304 0.752t-0.336 0.736-0.752 0.304-0.752-0.32l-5.184-5.376-5.376 5.184q-0.32 0.32-0.752 0.304t-0.736-0.336-0.304-0.752 0.32-0.752l5.376-5.184-5.184-5.376q-0.32-0.32-0.304-0.752t0.336-0.752 0.752-0.304 0.752 0.336l5.184 5.376 5.376-5.184q0.32-0.32 0.752-0.304t0.752 0.336 0.304 0.752-0.336 0.752l-5.376 5.184 5.184 5.376z'
export const ICON_PATH_DELETE =
'M28.512 6.336v22.912q0 0.864-0.608 1.472t-1.472 0.608h-20.8q-0.864 0-1.472-0.608t-0.608-1.472v-22.912h-2.144q-0.288 0-0.496-0.192t-0.208-0.512v-1.408q0-0.288 0.208-0.496t0.496-0.208h8.384v-1.472q0-0.576 0.4-0.976t0.976-0.4h9.696q0.608 0 1.008 0.4t0.4 0.976v1.472h8.384q0.288 0 0.496 0.208t0.208 0.496v1.408q0 0.32-0.208 0.512t-0.496 0.192h-2.144zM6.368 6.336v22.144h19.328v-22.144h-19.328zM19.008 9.76q-0.288 0-0.496 0.208t-0.208 0.496v13.92q0 0.288 0.208 0.496t0.496 0.208h1.44q0.288 0 0.496-0.208t0.208-0.496v-13.92q0-0.288-0.208-0.496t-0.496-0.208h-1.44zM11.616 9.76q-0.288 0-0.496 0.208t-0.208 0.496v13.92q0 0.288 0.208 0.496t0.496 0.208h1.44q0.288 0 0.496-0.208t0.208-0.496v-13.92q0-0.288-0.208-0.496t-0.496-0.208h-1.44zM11.616 9.76v0z'
export const ICON_PATH_DOWNLOAD =
'M15.808 1.696q-3.776 0-7.072 1.984-3.2 1.888-5.088 5.152-1.952 3.392-1.952 7.36 0 3.776 1.952 7.072 1.888 3.2 5.088 5.088 3.296 1.952 7.072 1.952 3.968 0 7.36-1.952 3.264-1.888 5.152-5.088 1.984-3.296 1.984-7.072 0-4-1.984-7.36-1.888-3.264-5.152-5.152-3.36-1.984-7.36-1.984zM20.864 18.592l-3.776 4.928q-0.448 0.576-1.088 0.576t-1.088-0.576l-3.776-4.928q-0.448-0.576-0.24-0.992t0.944-0.416h2.976v-8.928q0-0.256 0.176-0.432t0.4-0.176h1.216q0.224 0 0.4 0.176t0.176 0.432v8.928h2.976q0.736 0 0.944 0.416t-0.24 0.992z'
export const ICON_PATH_INFO_CIRCLE =
'M16 10.496q0.768 0 1.296-0.544t0.528-1.296-0.528-1.296-1.296-0.544-1.296 0.544-0.528 1.296 0.528 1.296 1.296 0.544zM17.824 12.32h-4.576v0.928h1.824v10.112h-1.824v0.896h6.432v-0.896h-1.856v-11.040zM16.448 1.312q-4.224 0-7.744 2.016-3.424 1.952-5.376 5.376-2.016 3.52-2.016 7.744 0 3.808 2 7.072t5.392 5.184q3.552 1.984 7.744 1.984 3.776 0 7.104-1.984 3.232-1.92 5.152-5.152 1.984-3.328 1.984-7.104 0-4.192-1.984-7.744-1.92-3.392-5.184-5.392t-7.072-2zM16 28.864q-3.488 0-6.496-1.76-2.912-1.696-4.608-4.608-1.76-3.008-1.76-6.496t1.76-6.496q1.696-2.912 4.608-4.608 3.008-1.76 6.496-1.76t6.496 1.76q2.912 1.696 4.608 4.608 1.76 3.008 1.76 6.496t-1.76 6.496q-1.696 2.912-4.608 4.608-3.008 1.76-6.496 1.76z'
export const ICON_PATH_INFO =
'M15.808 0.128q-4.224 0-7.872 2.176-3.552 2.112-5.632 5.728-2.176 3.776-2.176 8.16 0 4.224 2.176 7.872 2.080 3.552 5.632 5.632 3.648 2.176 7.872 2.176 4.384 0 8.16-2.176 3.616-2.080 5.728-5.632 2.176-3.648 2.176-7.872 0-4.416-2.176-8.16-2.112-3.616-5.728-5.728-3.744-2.176-8.16-2.176zM16.864 23.776q0 0.064-0.064 0.064h-1.568q-0.096 0-0.096-0.064l-0.256-11.328q0-0.064 0.064-0.064h2.112q0.096 0 0.064 0.064l-0.256 11.328zM16 10.88q-0.576 0-0.976-0.4t-0.4-0.96 0.4-0.96 0.976-0.4 0.976 0.4 0.4 0.96-0.4 0.96-0.976 0.4z'
export const ICON_PATH_SAFE_SUCCESS =
'M16.032 0.128q-2.080 0.48-4.16 1.056-1.792 0.448-3.68 1.024-1.408 0.448-3.296 1.024-4.064 1.312-3.040 0.992v10.848q0 4.576 2.272 8.32 1.984 3.2 5.44 5.536 3.008 1.984 6.464 2.912 3.456-0.928 6.432-2.912 3.488-2.336 5.44-5.536 2.304-3.744 2.304-8.32v-10.848q-9.472-3.008-4.096-1.312-2.56-0.8-4.64-1.376-2.72-0.768-5.44-1.408zM15.2 8.832h1.664q0.128 0 0.224 0.096t0.096 0.224l-0.384 10.048q0 0.064-0.048 0.112t-0.112 0.048h-1.216q-0.16 0-0.192-0.16l-0.352-10.048q0-0.128 0.096-0.224t0.224-0.096zM16.032 23.168q-0.48 0-0.832-0.336t-0.352-0.832 0.352-0.832 0.832-0.336 0.816 0.336 0.336 0.832-0.336 0.832-0.816 0.336z'
export const ICON_PATH_SAFE_WARN =
'M16.032 0.16q-2.72 0.608-5.44 1.376-2.112 0.576-4.64 1.376 5.6-1.76-4.096 1.312v10.88q0 4.544 2.272 8.288 1.984 3.232 5.44 5.536 3.008 2.016 6.464 2.912 3.456-0.896 6.432-2.912 3.488-2.304 5.44-5.536 2.304-3.744 2.304-8.288v-10.88q-9.696-3.072-4.096-1.312-2.528-0.8-4.64-1.376-2.72-0.768-5.44-1.376zM23.968 11.328l-9.568 9.44q-0.128 0.096-0.256 0l-4.416-4.576q-0.096-0.128 0-0.256l0.576-0.8q0.032-0.064 0.112-0.064t0.112 0.032l3.616 2.752q0.032 0.064 0.112 0.048t0.144-0.048l8.768-7.328q0.064-0.032 0.144-0.032t0.112 0.064l0.544 0.512q0.128 0.128 0 0.256z'
export const ICON_PATH_SEARCH =
'M20.928 22.688q-1.696 1.376-3.744 2.112-2.112 0.768-4.384 0.768-3.488 0-6.464-1.728-2.88-1.696-4.576-4.608-1.76-2.976-1.76-6.464t1.76-6.464q1.696-2.88 4.576-4.576 2.976-1.76 6.464-1.76t6.464 1.76q2.912 1.696 4.608 4.576 1.728 2.976 1.728 6.464 0 2.272-0.768 4.384-0.736 2.048-2.112 3.744l9.312 9.28-1.824 1.824-9.28-9.312zM12.8 23.008q2.784 0 5.184-1.376 2.304-1.376 3.68-3.68 1.376-2.4 1.376-5.184t-1.376-5.152q-1.376-2.336-3.68-3.68-2.4-1.408-5.184-1.408t-5.152 1.408q-2.336 1.344-3.68 3.68-1.408 2.368-1.408 5.152t1.408 5.184q1.344 2.304 3.68 3.68 2.368 1.376 5.152 1.376zM12.8 23.008v0z'
export function createSvgIconVNode(
path: string,
color: string = '#000',
size: number = 27
) {
return createVNode(
'svg',
{
width: size,
height: size,
viewBox: '0 0 32 32',
},
[
createVNode(
'path',
{
d: path,
fill: color,
},
null,
8 /* PROPS */,
['d', 'fill']
),
],
8 /* PROPS */,
['width', 'height']
)
}
packages/uni-components/src/index.ts
浏览文件 @ f14d8d3c
export * from './components'
export { createSvgIconVNode, ICON_PATH_SEARCH } from './helpers/icon'
packages/uni-h5/dist/assets/index-77a30187.css → packages/uni-h5/dist/assets/index-386df4cf.css
浏览文件 @ f14d8d3c
......@@ -557,79 +557,6 @@ uni-image>.uni-image-will-change {
will-change: transform;
}
uni-input {
display: block;
font-size: 16px;
line-height: 1.4em;
height: 1.4em;
min-height: 1.4em;
overflow: hidden;
}
uni-input[hidden] {
display: none;
}
.uni-input-wrapper,
.uni-input-placeholder,
.uni-input-form,
.uni-input-input {
outline: none;
border: none;
padding: 0;
margin: 0;
text-decoration: inherit;
}
.uni-input-wrapper,
.uni-input-form {
display: flex;
position: relative;
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
}
.uni-input-placeholder,
.uni-input-input {
width: 100%;
}
.uni-input-placeholder {
position: absolute;
top: auto !important;
left: 0;
color: gray;
overflow: hidden;
text-overflow: clip;
white-space: pre;
word-break: keep-all;
pointer-events: none;
line-height: inherit;
}
.uni-input-input {
display: block;
height: 100%;
background: none;
color: inherit;
opacity: 1;
-webkit-text-fill-color: currentcolor;
font: inherit;
line-height: inherit;
letter-spacing: inherit;
text-align: inherit;
text-indent: inherit;
text-transform: inherit;
text-shadow: inherit;
}
.uni-input-input[type="search"]::-webkit-search-cancel-button {
display: none;
}
.uni-input-input::-webkit-outer-spin-button,
.uni-input-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.uni-input-input[type="number"] {
-moz-appearance: textfield;
}
.uni-label-pointer {
cursor: pointer;
}
......@@ -1034,13 +961,6 @@ uni-textarea[hidden] {
margin: 0 -3px;
}
uni-view {
display: block;
}
uni-view[hidden] {
display: none;
}
.uni-async-error {
position: absolute;
left: 0;
......
packages/uni-h5/dist/uni-h5.esm.js
浏览文件 @ f14d8d3c
此差异已折叠。
packages/uni-h5/src/framework/components/page/index.ts
浏览文件 @ f14d8d3c
......@@ -15,12 +15,12 @@ import { providePageMeta } from '../../plugin/provide'
export default defineComponent({
name: 'Page',
setup(props, ctx) {
providePageMeta()
const { navigationBar } = providePageMeta()
return () =>
createVNode(
'uni-page',
null,
__UNI_FEATURE_NAVIGATIONBAR__
__UNI_FEATURE_NAVIGATIONBAR__ && navigationBar.style !== 'custom'
? [createVNode(PageHead), createPageBodyVNode(ctx)]
: [createPageBodyVNode(ctx)]
)
......
packages/uni-h5/src/framework/components/page/transparent.js 已删除 100644 → 0
浏览文件 @ 5196a2c6
import { hexToRgba } from '../../../helpers/hexToRgba'
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 iconElems = this.$el.querySelectorAll('.uni-btn-icon')
const iconElemsStyles = []
const textColor = this.textColor
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++) {
const borderRadiusElem = borderRadiusElems[i]
oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
borderRadiusElemsStyles.push(borderRadiusElem.style)
}
this._A = 0
UniViewJSBridge.on('onPageScroll', ({ scrollTop }) => {
const alpha = Math.min(scrollTop / this.offset, 1)
if (alpha === 1 && this._A === 1) {
return
}
if (alpha > 0.5 && this._A <= 0.5) {
iconElemsStyles.forEach(function (iconElemStyle) {
iconElemStyle.color = textColor
})
} else if (alpha <= 0.5 && this._A > 0.5) {
iconElemsStyles.forEach(function (iconElemStyle) {
iconElemStyle.color = '#fff'
})
}
this._A = alpha
// TODO 暂时仅处理背景色
if (titleElem) {
titleElem.style.opacity = alpha
}
transparentElemStyle.backgroundColor = `rgba(${this._R},${this._G},${this._B},${alpha})`
borderRadiusElemsStyles.forEach(function (
borderRadiusElemStyle,
index
) {
const oldColor = oldColors[index]
// eslint-disable-next-line
let rgba = oldColor.match(/[\d+\.]+/g)
rgba[3] = (1 - alpha) * (rgba.length === 4 ? rgba[3] : 1)
borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
})
})
} else if (this.type === 'float') {
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++) {
const borderRadiusElem = borderRadiusElems[i]
oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
borderRadiusElemsStyles.push(borderRadiusElem.style)
}
}
},
computed: {
color() {
return this.type === 'transparent' ? '#fff' : this.textColor
},
offset() {
return parseInt(this.coverage)
},
bgColor() {
if (this.type === 'transparent') {
const { r, g, b } = hexToRgba(this.backgroundColor)
this._R = r
this._G = g
this._B = b
return `rgba(${r},${g},${b},0)`
}
return this.backgroundColor
},
},
}
packages/uni-h5/src/framework/components/page/transparent.ts 0 → 100644
浏览文件 @ f14d8d3c
import { computed, onMounted, Ref } from 'vue'
import { hexToRgba } from '../../../helpers/hexToRgba'
export function usePageHeadTransparentBackgroundColor(backgroundColor: string) {
const { r, g, b } = hexToRgba(backgroundColor)
return `rgba(${r},${g},${b},0)`
}
export function usePageHeadTransparent(
headRef: Ref<null>,
{ titleColor, coverage, backgroundColor }: UniApp.PageNavigationBar
) {
let A = 0
const rgb = computed(() => hexToRgba(backgroundColor!))
const offset = parseInt(coverage!)
onMounted(() => {
const $el = (headRef.value as unknown) as HTMLDivElement
const transparentElemStyle = $el.style
const titleElem = $el.querySelector(
'.uni-page-head__title'
) as HTMLDivElement
const borderRadiusElems = $el.querySelectorAll(
'.uni-page-head-btn'
) as NodeListOf<HTMLElement>
const iconElems = $el.querySelectorAll(
'.uni-btn-icon'
) as NodeListOf<HTMLElement>
const iconElemsStyles: CSSStyleDeclaration[] = []
for (let i = 0; i < iconElems.length; i++) {
iconElemsStyles.push(iconElems[i].style)
}
const oldColors: string[] = []
const borderRadiusElemsStyles: CSSStyleDeclaration[] = []
for (let i = 0; i < borderRadiusElems.length; i++) {
const borderRadiusElem = borderRadiusElems[i]
oldColors.push(getComputedStyle(borderRadiusElem).backgroundColor)
borderRadiusElemsStyles.push(borderRadiusElem.style)
}
A = 0
UniViewJSBridge.on(
'onPageScroll',
({ scrollTop }: { scrollTop: number }) => {
const alpha = Math.min(scrollTop / offset, 1)
if (alpha === 1 && A === 1) {
return
}
if (alpha > 0.5 && A <= 0.5) {
iconElemsStyles.forEach(function (iconElemStyle) {
iconElemStyle.color = titleColor!
})
} else if (alpha <= 0.5 && A > 0.5) {
iconElemsStyles.forEach(function (iconElemStyle) {
iconElemStyle.color = '#fff'
})
}
A = alpha
// TODO 暂时仅处理背景色
if (titleElem) {
titleElem.style.opacity = (alpha as unknown) as string
}
const bg = rgb.value
transparentElemStyle.backgroundColor = `rgba(${bg.r},${bg.g},${bg.b},${alpha})`
borderRadiusElemsStyles.forEach(function (
borderRadiusElemStyle,
index
) {
const oldColor = oldColors[index]
const rgba = oldColor.match(/[\d+\.]+/g)!
rgba[3] = (((1 - alpha) *
((rgba.length === 4 ? rgba[3] : 1) as number)) as unknown) as string
borderRadiusElemStyle.backgroundColor = `rgba(${rgba})`
})
}
)
})
}
packages/uni-h5/src/helpers/dom.ts
浏览文件 @ f14d8d3c
此差异已折叠。
packages/uni-h5/style/button.css
浏览文件 @ f14d8d3c
此差异已折叠。
packages/uni-h5/style/input.css 0 → 100644
浏览文件 @ f14d8d3c
此差异已折叠。
packages/uni-h5/style/pageHead.css
浏览文件 @ f14d8d3c
此差异已折叠。
packages/uni-h5/style/view.css
浏览文件 @ f14d8d3c
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或