Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Velpro187
uni-app
提交
fffd1fb0
U
uni-app
项目概览
Velpro187
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
fffd1fb0
编写于
4月 21, 2021
作者:
fxy060608
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: onNavigationBarSearchInput
上级
19d62301
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
235 addition
and
129 deletion
+235
-129
packages/uni-components/src/helpers/useSubscribe.ts
packages/uni-components/src/helpers/useSubscribe.ts
+5
-0
packages/uni-components/src/index.ts
packages/uni-components/src/index.ts
+1
-1
packages/uni-h5/dist/uni-h5.esm.js
packages/uni-h5/dist/uni-h5.esm.js
+114
-54
packages/uni-h5/src/framework/components/page/pageHead.tsx
packages/uni-h5/src/framework/components/page/pageHead.tsx
+73
-28
packages/uni-h5/src/framework/components/page/transparent.ts
packages/uni-h5/src/framework/components/page/transparent.ts
+41
-45
packages/uni-h5/src/framework/plugin/page.ts
packages/uni-h5/src/framework/plugin/page.ts
+1
-1
未找到文件。
packages/uni-components/src/helpers/useSubscribe.ts
浏览文件 @
fffd1fb0
...
...
@@ -62,3 +62,8 @@ export function useSubscribe(
removeSubscribe
(
name
||
normalizeEvent
(
pageId
,
vm
)
!
)
})
}
export
function
useOn
(
name
:
string
,
callback
:
(...
args
:
any
[])
=>
any
)
{
onMounted
(()
=>
UniViewJSBridge
.
on
(
name
,
callback
))
onBeforeUnmount
(()
=>
UniViewJSBridge
.
off
(
name
))
}
packages/uni-components/src/index.ts
浏览文件 @
fffd1fb0
export
*
from
'
./components
'
export
{
useSubscribe
}
from
'
./helpers/useSubscribe
'
export
{
use
On
,
use
Subscribe
}
from
'
./helpers/useSubscribe
'
export
{
useCustomEvent
}
from
'
./helpers/useEvent
'
packages/uni-h5/dist/uni-h5.esm.js
浏览文件 @
fffd1fb0
...
...
@@ -1198,7 +1198,7 @@ function removePage(routeKey, removeRouteCaches = true) {
currentPagesMap
.
delete
(
routeKey
);
removeRouteCaches
&&
removeRouteCache
(
routeKey
);
}
let
id
=
history
.
state
&&
history
.
state
.
__id__
||
1
;
let
id
=
/* @__PURE__ */
(()
=>
history
.
state
&&
history
.
state
.
__id__
||
1
)()
;
function
createPageState
(
type
,
__id__
)
{
return
{
__id__
:
__id__
||
++
id
,
...
...
@@ -7544,12 +7544,10 @@ const props = {
}
}
};
var
index$3
=
defineComponent
({
var
index$3
=
/* @__PURE__ */
defineComponent
({
name
:
"
Progress
"
,
props
,
setup
(
props2
,
{
attrs
:
attrs2
})
{
setup
(
props2
)
{
const
state
=
useProgressState
(
props2
);
_activeAnimation
(
state
,
props2
);
watch
(()
=>
state
.
realPercent
,
(
newValue
,
oldValue
)
=>
{
...
...
@@ -9935,6 +9933,10 @@ function useSubscribe(callback, name) {
removeSubscribe
(
name
||
normalizeEvent
(
pageId
,
vm
));
});
}
function
useOn
(
name
,
callback
)
{
onMounted
(()
=>
UniViewJSBridge
.
on
(
name
,
callback
));
onBeforeUnmount
(()
=>
UniViewJSBridge
.
off
(
name
));
}
const
passiveOptions
=
passive
(
false
);
const
GestureType
=
{
NONE
:
"
none
"
,
...
...
@@ -10105,6 +10107,11 @@ const _sfc_main$3 = {
this
.
updateProgress
();
},
buffered
(
buffered
)
{
if
(
buffered
!==
0
)
{
this
.
$trigger
(
"
progress
"
,
{},
{
buffered
});
}
}
},
setup
()
{
...
...
@@ -12968,54 +12975,58 @@ function usePageHeadTransparentBackgroundColor(backgroundColor) {
const
{
r
,
g
:
g2
,
b
}
=
hexToRgba
(
backgroundColor
);
return
`rgba(
${
r
}
,
${
g2
}
,
${
b
}
,0)`
;
}
function
usePageHeadTransparent
(
headRef
,
{
titleColor
,
coverage
,
backgroundColor
})
{
function
usePageHeadTransparent
(
headRef
,
{
id
:
id2
,
navigationBar
:
{
titleColor
,
coverage
,
backgroundColor
}
})
{
let
A
=
0
;
const
rgb
=
computed
(()
=>
hexToRgba
(
backgroundColor
));
const
offset
=
parseInt
(
coverage
);
let
titleElem
;
let
transparentElemStyle
;
const
iconElemsStyles
=
[];
const
borderRadiusElemsStyles
=
[];
const
oldColors
=
[];
onMounted
(()
=>
{
const
$el
=
headRef
.
value
;
const
transparentElemStyle
=
$el
.
style
;
const
titleElem
=
$el
.
querySelector
(
"
.uni-page-head__title
"
);
transparentElemStyle
=
$el
.
style
;
titleElem
=
$el
.
querySelector
(
"
.uni-page-head__title
"
);
const
borderRadiusElems
=
$el
.
querySelectorAll
(
"
.uni-page-head-btn
"
);
const
iconElems
=
$el
.
querySelectorAll
(
"
.uni-btn-icon
"
);
const
iconElemsStyles
=
[];
for
(
let
i2
=
0
;
i2
<
iconElems
.
length
;
i2
++
)
{
iconElemsStyles
.
push
(
iconElems
[
i2
].
style
);
}
const
oldColors
=
[];
const
borderRadiusElemsStyles
=
[];
for
(
let
i2
=
0
;
i2
<
borderRadiusElems
.
length
;
i2
++
)
{
const
borderRadiusElem
=
borderRadiusElems
[
i2
];
oldColors
.
push
(
getComputedStyle
(
borderRadiusElem
).
backgroundColor
);
borderRadiusElemsStyles
.
push
(
borderRadiusElem
.
style
);
}
A
=
0
;
UniViewJSBridge
.
on
(
"
onPageScroll
"
,
({
scrollTop
})
=>
{
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
;
if
(
titleElem
)
{
titleElem
.
style
.
opacity
=
alpha
;
}
const
bg
=
rgb
.
value
;
transparentElemStyle
.
backgroundColor
=
`rgba(
${
bg
.
r
}
,
${
bg
.
g
}
,
${
bg
.
b
}
,
${
alpha
}
)`
;
borderRadiusElemsStyles
.
forEach
(
function
(
borderRadiusElemStyle
,
index2
)
{
const
oldColor
=
oldColors
[
index2
];
const
rgba
=
oldColor
.
match
(
/
[\d
+
\.]
+/g
);
rgba
[
3
]
=
(
1
-
alpha
)
*
(
rgba
.
length
===
4
?
rgba
[
3
]
:
1
);
borderRadiusElemStyle
.
backgroundColor
=
`rgba(
${
rgba
}
)`
;
});
useOn
(
id2
+
"
.onPageScroll
"
,
({
scrollTop
})
=>
{
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
;
if
(
titleElem
)
{
titleElem
.
style
.
opacity
=
alpha
;
}
const
bg
=
rgb
.
value
;
transparentElemStyle
.
backgroundColor
=
`rgba(
${
bg
.
r
}
,
${
bg
.
g
}
,
${
bg
.
b
}
,
${
alpha
}
)`
;
borderRadiusElemsStyles
.
forEach
(
function
(
borderRadiusElemStyle
,
index2
)
{
const
oldColor
=
oldColors
[
index2
];
const
rgba
=
oldColor
.
match
(
/
[\d
+
\.]
+/g
);
rgba
[
3
]
=
(
1
-
alpha
)
*
(
rgba
.
length
===
4
?
rgba
[
3
]
:
1
);
borderRadiusElemStyle
.
backgroundColor
=
`rgba(
${
rgba
}
)`
;
});
});
}
...
...
@@ -13036,14 +13047,14 @@ var PageHead = /* @__PURE__ */ defineComponent({
const
headRef
=
ref
(
null
);
const
pageMeta
=
usePageMeta
();
const
navigationBar
=
pageMeta
.
navigationBar
;
UniServiceJSBridge
.
emit
(
"
onNavigationBarChange
"
,
navigationBar
.
titleText
);
const
{
clazz
,
style
}
=
usePageHead
(
navigationBar
);
const
buttons
=
__UNI_FEATURE_NAVIGATIONBAR_BUTTONS__
&&
usePageHeadButtons
(
navigationBar
);
const
searchInput
=
__UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__
&&
usePageHeadSearchInput
();
__UNI_FEATURE_NAVIGATIONBAR_TRANSPARENT__
&&
usePageHeadTransparent
(
headRef
,
navigationBar
);
const
searchInput
=
__UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__
&&
navigationBar
.
searchInput
&&
usePageHeadSearchInput
(
pageMeta
);
__UNI_FEATURE_NAVIGATIONBAR_TRANSPARENT__
&&
navigationBar
.
type
===
"
transparent
"
;
usePageHeadTransparent
(
headRef
,
pageMeta
);
return
()
=>
{
const
backButtonTsx
=
__UNI_FEATURE_PAGES__
?
createBackButtonTsx
(
pageMeta
)
:
null
;
const
leftButtonsTsx
=
__UNI_FEATURE_NAVIGATIONBAR_BUTTONS__
?
createButtonsTsx
(
buttons
.
left
)
:
[];
...
...
@@ -13131,7 +13142,9 @@ function createPageHeadSearchInputTsx(navigationBar, {
composing
,
onBlur
,
onFocus
,
onInput
onInput
,
onKeyup
,
onClick
})
{
const
{
color
,
...
...
@@ -13158,9 +13171,19 @@ function createPageHeadSearchInputTsx(navigationBar, {
class
:
placeholderClass
},
[
createVNode
(
"
div
"
,
{
class
:
"
uni-page-head-search-icon
"
},
[
createSvgIconVNode
(
ICON_PATH_SEARCH
,
placeholderColor
,
20
)]),
text2
.
value
||
composing
.
value
?
""
:
placeholder
],
6
),
createVNode
(
_sfc_main$f
,
{
},
[
createSvgIconVNode
(
ICON_PATH_SEARCH
,
placeholderColor
,
20
)]),
text2
.
value
||
composing
.
value
?
""
:
placeholder
],
6
),
disabled
?
createVNode
(
_sfc_main$f
,
{
disabled
:
true
,
style
:
{
color
},
"
placeholder-style
"
:
{
color
:
placeholderColor
},
class
:
"
uni-page-head-search-input
"
,
"
confirm-type
"
:
"
search
"
,
onClick
},
null
,
8
,
[
"
style
"
,
"
placeholder-style
"
,
"
onClick
"
])
:
createVNode
(
_sfc_main$f
,
{
focus
:
autoFocus
,
disabled
,
style
:
{
color
},
...
...
@@ -13171,8 +13194,9 @@ function createPageHeadSearchInputTsx(navigationBar, {
"
confirm-type
"
:
"
search
"
,
onFocus
,
onBlur
,
onInput
},
null
,
8
,
[
"
focus
"
,
"
disabled
"
,
"
style
"
,
"
placeholder-style
"
,
"
onFocus
"
,
"
onBlur
"
,
"
onInput
"
])],
4
);
onInput
,
onKeyup
},
null
,
8
,
[
"
focus
"
,
"
style
"
,
"
placeholder-style
"
,
"
onFocus
"
,
"
onBlur
"
,
"
onInput
"
,
"
onKeyup
"
])],
4
);
}
function
onPageHeadBackButton
()
{
if
(
getCurrentPages
().
length
===
1
)
{
...
...
@@ -13278,26 +13302,62 @@ function usePageHeadButton(btn, isTransparent) {
iconStyle
};
}
function
usePageHeadSearchInput
(
navigationBar
)
{
function
usePageHeadSearchInput
({
id
:
id2
,
navigationBar
:
{
searchInput
}
})
{
const
focus
=
ref
(
false
);
const
text2
=
ref
(
""
);
const
composing
=
ref
(
false
);
function
onFocus
()
{
focus
.
value
=
true
;
const
{
disabled
}
=
searchInput
;
if
(
disabled
)
{
const
onClick
=
()
=>
{
invokeHook
(
id2
,
"
onNavigationBarSearchInputClicked
"
);
};
return
{
focus
,
text
:
text2
,
composing
,
onClick
};
}
function
onBlur
()
{
const
onFocus
=
()
=>
{
focus
.
value
=
true
;
invokeHook
(
id2
,
"
onNavigationBarSearchInputFocusChanged
"
,
{
focus
:
true
});
};
const
onBlur
=
()
=>
{
focus
.
value
=
false
;
}
function
onInput
(
evt
)
{
invokeHook
(
id2
,
"
onNavigationBarSearchInputFocusChanged
"
,
{
focus
:
false
});
};
const
onInput
=
(
evt
)
=>
{
text2
.
value
=
evt
.
detail
.
value
;
}
invokeHook
(
id2
,
"
onNavigationBarSearchInputChanged
"
,
{
text
:
text2
.
value
});
};
const
onKeyup
=
(
evt
)
=>
{
if
(
evt
.
key
===
"
Enter
"
||
evt
.
keyCode
===
13
)
{
invokeHook
(
id2
,
"
onNavigationBarSearchInputConfirmed
"
,
{
text
:
text2
.
value
});
}
};
return
{
focus
,
text
:
text2
,
composing
,
onFocus
,
onBlur
,
onInput
onInput
,
onKeyup
};
}
var
_sfc_main$2
=
{
...
...
@@ -13620,4 +13680,4 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
]);
}
_sfc_main
.
render
=
_sfc_render
;
export
{
_sfc_main$1
as
AsyncErrorComponent
,
_sfc_main
as
AsyncLoadingComponent
,
_sfc_main$k
as
Audio
,
index$6
as
Button
,
_sfc_main$j
as
Canvas
,
_sfc_main$i
as
Checkbox
,
_sfc_main$h
as
CheckboxGroup
,
_sfc_main$g
as
Editor
,
index$7
as
Form
,
index$5
as
Icon
,
index$4
as
Image
,
_sfc_main$f
as
Input
,
_sfc_main$e
as
Label
,
LayoutComponent
,
_sfc_main$d
as
MovableView
,
_sfc_main$c
as
Navigator
,
index
as
PageComponent
,
index$3
as
Progress
,
_sfc_main$b
as
Radio
,
_sfc_main$a
as
RadioGroup
,
ResizeSensor
,
_sfc_main$9
as
RichText
,
_sfc_main$8
as
ScrollView
,
_sfc_main$7
as
Slider
,
_sfc_main$6
as
SwiperItem
,
_sfc_main$5
as
Switch
,
index$2
as
Text
,
_sfc_main$4
as
Textarea
,
UniServiceJSBridge$1
as
UniServiceJSBridge
,
UniViewJSBridge$1
as
UniViewJSBridge
,
_sfc_main$3
as
Video
,
index$1
as
View
,
addInterceptor
,
arrayBufferToBase64
,
base64ToArrayBuffer
,
canIUse
,
chooseFile
,
chooseImage
,
chooseVideo
,
clearStorage
,
clearStorageSync
,
closeSocket
,
connectSocket
,
createInnerAudioContext
,
createIntersectionObserver
,
createSelectorQuery
,
createVideoContext
,
cssBackdropFilter
,
cssConstant
,
cssEnv
,
cssVar
,
downloadFile
,
getApp$1
as
getApp
,
getCurrentPages$1
as
getCurrentPages
,
getFileInfo
,
getImageInfo
,
getLocation
,
getNetworkType
,
getStorage
,
getStorageInfo
,
getStorageInfoSync
,
getStorageSync
,
getSystemInfo
,
getSystemInfoSync
,
getVideoInfo
,
hideKeyboard
,
hideLoading
,
hideNavigationBarLoading
,
hideTabBar
,
hideTabBarRedDot
,
hideToast
,
loadFontFace
,
makePhoneCall
,
navigateBack
,
navigateTo
,
offAccelerometerChange
,
offCompassChange
,
offNetworkStatusChange
,
onAccelerometerChange
,
onCompassChange
,
onNetworkStatusChange
,
onSocketClose
,
onSocketError
,
onSocketMessage
,
onSocketOpen
,
onTabBarMidButtonTap
,
openDocument
,
pageScrollTo
,
index$8
as
plugin
,
promiseInterceptor
,
reLaunch
,
redirectTo
,
removeInterceptor
,
removeStorage
,
removeStorageSync
,
removeTabBarBadge
,
request
,
sendSocketMessage
,
setNavigationBarColor
,
setNavigationBarTitle
,
setStorage
,
setStorageSync
,
setTabBarBadge
,
setTabBarItem
,
setTabBarStyle
,
setupApp
,
setupPage
,
showActionSheet
,
showLoading
,
showModal
,
showNavigationBarLoading
,
showTabBar
,
showTabBarRedDot
,
showToast
,
startAccelerometer
,
startCompass
,
startPullDownRefresh
,
stopAccelerometer
,
stopCompass
,
stopPullDownRefresh
,
switchTab
,
uni$1
as
uni
,
uploadFile
,
upx2px
,
useCustomEvent
,
usePageRoute
,
useSubscribe
,
vibrateLong
,
vibrateShort
};
export
{
_sfc_main$1
as
AsyncErrorComponent
,
_sfc_main
as
AsyncLoadingComponent
,
_sfc_main$k
as
Audio
,
index$6
as
Button
,
_sfc_main$j
as
Canvas
,
_sfc_main$i
as
Checkbox
,
_sfc_main$h
as
CheckboxGroup
,
_sfc_main$g
as
Editor
,
index$7
as
Form
,
index$5
as
Icon
,
index$4
as
Image
,
_sfc_main$f
as
Input
,
_sfc_main$e
as
Label
,
LayoutComponent
,
_sfc_main$d
as
MovableView
,
_sfc_main$c
as
Navigator
,
index
as
PageComponent
,
index$3
as
Progress
,
_sfc_main$b
as
Radio
,
_sfc_main$a
as
RadioGroup
,
ResizeSensor
,
_sfc_main$9
as
RichText
,
_sfc_main$8
as
ScrollView
,
_sfc_main$7
as
Slider
,
_sfc_main$6
as
SwiperItem
,
_sfc_main$5
as
Switch
,
index$2
as
Text
,
_sfc_main$4
as
Textarea
,
UniServiceJSBridge$1
as
UniServiceJSBridge
,
UniViewJSBridge$1
as
UniViewJSBridge
,
_sfc_main$3
as
Video
,
index$1
as
View
,
addInterceptor
,
arrayBufferToBase64
,
base64ToArrayBuffer
,
canIUse
,
chooseFile
,
chooseImage
,
chooseVideo
,
clearStorage
,
clearStorageSync
,
closeSocket
,
connectSocket
,
createInnerAudioContext
,
createIntersectionObserver
,
createSelectorQuery
,
createVideoContext
,
cssBackdropFilter
,
cssConstant
,
cssEnv
,
cssVar
,
downloadFile
,
getApp$1
as
getApp
,
getCurrentPages$1
as
getCurrentPages
,
getFileInfo
,
getImageInfo
,
getLocation
,
getNetworkType
,
getStorage
,
getStorageInfo
,
getStorageInfoSync
,
getStorageSync
,
getSystemInfo
,
getSystemInfoSync
,
getVideoInfo
,
hideKeyboard
,
hideLoading
,
hideNavigationBarLoading
,
hideTabBar
,
hideTabBarRedDot
,
hideToast
,
loadFontFace
,
makePhoneCall
,
navigateBack
,
navigateTo
,
offAccelerometerChange
,
offCompassChange
,
offNetworkStatusChange
,
onAccelerometerChange
,
onCompassChange
,
onNetworkStatusChange
,
onSocketClose
,
onSocketError
,
onSocketMessage
,
onSocketOpen
,
onTabBarMidButtonTap
,
openDocument
,
pageScrollTo
,
index$8
as
plugin
,
promiseInterceptor
,
reLaunch
,
redirectTo
,
removeInterceptor
,
removeStorage
,
removeStorageSync
,
removeTabBarBadge
,
request
,
sendSocketMessage
,
setNavigationBarColor
,
setNavigationBarTitle
,
setStorage
,
setStorageSync
,
setTabBarBadge
,
setTabBarItem
,
setTabBarStyle
,
setupApp
,
setupPage
,
showActionSheet
,
showLoading
,
showModal
,
showNavigationBarLoading
,
showTabBar
,
showTabBarRedDot
,
showToast
,
startAccelerometer
,
startCompass
,
startPullDownRefresh
,
stopAccelerometer
,
stopCompass
,
stopPullDownRefresh
,
switchTab
,
uni$1
as
uni
,
uploadFile
,
upx2px
,
useCustomEvent
,
use
On
,
use
PageRoute
,
useSubscribe
,
vibrateLong
,
vibrateShort
};
packages/uni-h5/src/framework/components/page/pageHead.tsx
浏览文件 @
fffd1fb0
...
...
@@ -2,7 +2,11 @@ import { computed, defineComponent, Ref, ref } from 'vue'
import
{
isArray
}
from
'
@vue/shared
'
import
{
Input
}
from
'
@dcloudio/uni-components
'
import
{
getRealPath
}
from
'
@dcloudio/uni-platform
'
import
{
ICON_PATH_SEARCH
,
createSvgIconVNode
}
from
'
@dcloudio/uni-core
'
import
{
ICON_PATH_SEARCH
,
createSvgIconVNode
,
invokeHook
,
}
from
'
@dcloudio/uni-core
'
import
{
usePageMeta
}
from
'
../../plugin/provide
'
import
{
usePageHeadTransparent
,
...
...
@@ -37,14 +41,16 @@ export default /*#__PURE__*/ defineComponent({
const
headRef
=
ref
(
null
)
const
pageMeta
=
usePageMeta
()
const
navigationBar
=
pageMeta
.
navigationBar
UniServiceJSBridge
.
emit
(
'
onNavigationBarChange
'
,
navigationBar
.
titleText
)
//
UniServiceJSBridge.emit('onNavigationBarChange', navigationBar.titleText)
const
{
clazz
,
style
}
=
usePageHead
(
navigationBar
)
const
buttons
=
(
__UNI_FEATURE_NAVIGATIONBAR_BUTTONS__
&&
usePageHeadButtons
(
navigationBar
))
as
PageHeadButtons
const
searchInput
=
(
__UNI_FEATURE_NAVIGATIONBAR_SEARCHINPUT__
&&
usePageHeadSearchInput
(
navigationBar
))
as
PageHeadSearchInput
navigationBar
.
searchInput
&&
usePageHeadSearchInput
(
pageMeta
))
as
PageHeadSearchInput
__UNI_FEATURE_NAVIGATIONBAR_TRANSPARENT__
&&
usePageHeadTransparent
(
headRef
,
navigationBar
)
navigationBar
.
type
===
'
transparent
'
usePageHeadTransparent
(
headRef
,
pageMeta
)
return
()
=>
{
// 单页面无需back按钮
const
backButtonTsx
=
__UNI_FEATURE_PAGES__
...
...
@@ -161,7 +167,16 @@ function createPageHeadTitleTextTsx({
function
createPageHeadSearchInputTsx
(
navigationBar
:
UniApp
.
PageNavigationBar
,
{
text
,
focus
,
composing
,
onBlur
,
onFocus
,
onInput
}:
PageHeadSearchInput
{
text
,
focus
,
composing
,
onBlur
,
onFocus
,
onInput
,
onKeyup
,
onClick
,
}:
PageHeadSearchInput
)
{
const
{
color
,
...
...
@@ -191,17 +206,28 @@ function createPageHeadSearchInputTsx(
</
div
>
{
text
.
value
||
composing
.
value
?
''
:
placeholder
}
</
div
>
<
Input
focus
=
{
autoFocus
}
disabled
=
{
disabled
}
style
=
{
{
color
}
}
placeholder
-
style
=
{
{
color
:
placeholderColor
}
}
class
=
"uni-page-head-search-input"
confirm
-
type
=
"search"
onFocus
=
{
onFocus
}
onBlur
=
{
onBlur
}
onInput
=
{
onInput
}
/>
{
disabled
?
(
<
Input
disabled
=
{
true
}
style
=
{
{
color
}
}
placeholder
-
style
=
{
{
color
:
placeholderColor
}
}
class
=
"uni-page-head-search-input"
confirm
-
type
=
"search"
onClick
=
{
onClick
}
/>
)
:
(
<
Input
focus
=
{
autoFocus
}
style
=
{
{
color
}
}
placeholder
-
style
=
{
{
color
:
placeholderColor
}
}
class
=
"uni-page-head-search-input"
confirm
-
type
=
"search"
onFocus
=
{
onFocus
}
onBlur
=
{
onBlur
}
onInput
=
{
onInput
}
onKeyup
=
{
onKeyup
}
/>
)
}
</
div
>
)
}
...
...
@@ -329,27 +355,45 @@ function usePageHeadButton(
}
}
interface
PageHeadSearchInput
{
focus
:
Ref
<
boolean
>
text
:
Ref
<
string
>
composing
:
Ref
<
boolean
>
onFocus
:
()
=>
void
onBlur
:
()
=>
void
onInput
:
(
evt
:
{
detail
:
{
value
:
string
}
})
=>
void
}
type
PageHeadSearchInput
=
ReturnType
<
typeof
usePageHeadSearchInput
>
function
usePageHeadSearchInput
(
navigationBar
:
UniApp
.
PageNavigationBar
)
{
function
usePageHeadSearchInput
({
id
,
navigationBar
:
{
searchInput
},
}:
UniApp
.
PageRouteMeta
)
{
const
focus
=
ref
(
false
)
const
text
=
ref
(
''
)
const
composing
=
ref
(
false
)
function
onFocus
()
{
const
{
disabled
}
=
searchInput
!
if
(
disabled
)
{
const
onClick
=
()
=>
{
invokeHook
(
id
,
'
onNavigationBarSearchInputClicked
'
)
}
return
{
focus
,
text
,
composing
,
onClick
,
}
}
const
onFocus
=
()
=>
{
focus
.
value
=
true
invokeHook
(
id
,
'
onNavigationBarSearchInputFocusChanged
'
,
{
focus
:
true
})
}
function
onBlur
()
{
const
onBlur
=
()
=>
{
focus
.
value
=
false
invokeHook
(
id
,
'
onNavigationBarSearchInputFocusChanged
'
,
{
focus
:
false
})
}
function
onInput
(
evt
:
{
detail
:
{
value
:
string
}
})
{
const
onInput
=
(
evt
:
{
detail
:
{
value
:
string
}
})
=>
{
text
.
value
=
evt
.
detail
.
value
invokeHook
(
id
,
'
onNavigationBarSearchInputChanged
'
,
{
text
:
text
.
value
})
}
const
onKeyup
=
(
evt
:
KeyboardEvent
)
=>
{
if
(
evt
.
key
===
'
Enter
'
||
evt
.
keyCode
===
13
)
{
invokeHook
(
id
,
'
onNavigationBarSearchInputConfirmed
'
,
{
text
:
text
.
value
,
})
}
}
return
{
focus
,
...
...
@@ -358,5 +402,6 @@ function usePageHeadSearchInput(navigationBar: UniApp.PageNavigationBar) {
onFocus
,
onBlur
,
onInput
,
onKeyup
,
}
}
packages/uni-h5/src/framework/components/page/transparent.ts
浏览文件 @
fffd1fb0
import
{
computed
,
onMounted
,
Ref
}
from
'
vue
'
import
{
useOn
}
from
'
@dcloudio/uni-components
'
import
{
hexToRgba
}
from
'
../../../helpers/hexToRgba
'
export
function
usePageHeadTransparentBackgroundColor
(
backgroundColor
:
string
)
{
...
...
@@ -8,70 +9,65 @@ export function usePageHeadTransparentBackgroundColor(backgroundColor: string) {
export
function
usePageHeadTransparent
(
headRef
:
Ref
<
null
>
,
{
titleColor
,
coverage
,
backgroundColor
}:
UniApp
.
PageNavigationBar
{
id
,
navigationBar
:
{
titleColor
,
coverage
,
backgroundColor
},
}:
UniApp
.
PageRouteMeta
)
{
let
A
=
0
const
rgb
=
computed
(()
=>
hexToRgba
(
backgroundColor
!
))
const
offset
=
parseInt
(
coverage
!
)
let
titleElem
:
HTMLDivElement
let
transparentElemStyle
:
CSSStyleDeclaration
const
iconElemsStyles
:
CSSStyleDeclaration
[]
=
[]
const
borderRadiusElemsStyles
:
CSSStyleDeclaration
[]
=
[]
const
oldColors
:
string
[]
=
[]
onMounted
(()
=>
{
const
$el
=
(
headRef
.
value
as
unknown
)
as
HTMLDivElement
const
transparentElemStyle
=
$el
.
style
const
titleElem
=
$el
.
querySelector
(
'
.uni-page-head__title
'
)
as
HTMLDivElement
transparentElemStyle
=
$el
.
style
titleElem
=
$el
.
querySelector
(
'
.uni-page-head__title
'
)
!
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
}
)`
})
}
)
})
useOn
(
id
+
'
.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/framework/plugin/page.ts
浏览文件 @
fffd1fb0
...
...
@@ -57,7 +57,7 @@ export function removePage(routeKey: string, removeRouteCaches = true) {
removeRouteCaches
&&
removeRouteCache
(
routeKey
)
}
let
id
=
(
history
.
state
&&
history
.
state
.
__id__
)
||
1
let
id
=
/*#__PURE__*/
(()
=>
(
history
.
state
&&
history
.
state
.
__id__
)
||
1
)()
export
function
createPageState
(
type
:
NavigateType
,
__id__
?:
number
)
{
return
{
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录