Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Velpro187
uni-app
提交
c864ff86
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,发现更多精彩内容 >>
提交
c864ff86
编写于
3月 23, 2021
作者:
fxy060608
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: remove unused
上级
91bd0273
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
8 addition
and
1208 deletion
+8
-1208
packages/uni-h5/dist/uni-h5.esm.js
packages/uni-h5/dist/uni-h5.esm.js
+2
-1
packages/uni-h5/src/framework/components/page/index.vue
packages/uni-h5/src/framework/components/page/index.vue
+0
-249
packages/uni-h5/src/framework/components/page/merge-title-nview.js
...uni-h5/src/framework/components/page/merge-title-nview.js
+0
-46
packages/uni-h5/src/framework/components/page/page-refresh/component.vue
.../src/framework/components/page/page-refresh/component.vue
+0
-0
packages/uni-h5/src/framework/components/page/page-refresh/index.ts
...ni-h5/src/framework/components/page/page-refresh/index.ts
+0
-0
packages/uni-h5/src/framework/components/page/pageBody.ts
packages/uni-h5/src/framework/components/page/pageBody.ts
+2
-2
packages/uni-h5/src/framework/components/page/pageBody.vue
packages/uni-h5/src/framework/components/page/pageBody.vue
+0
-59
packages/uni-h5/src/framework/components/page/pageHead.ts
packages/uni-h5/src/framework/components/page/pageHead.ts
+4
-0
packages/uni-h5/src/framework/components/page/pageHead.vue
packages/uni-h5/src/framework/components/page/pageHead.vue
+0
-599
packages/uni-h5/src/framework/components/page/pull-to-refresh.js
...s/uni-h5/src/framework/components/page/pull-to-refresh.js
+0
-252
未找到文件。
packages/uni-h5/dist/uni-h5.esm.js
浏览文件 @
c864ff86
...
...
@@ -8082,6 +8082,7 @@ var PageHead = defineComponent({
name
:
"
PageHead
"
,
setup
()
{
const
pageMeta
=
usePageMeta
();
UniServiceJSBridge
.
emit
(
"
onNavigationBarChange
"
,
pageMeta
.
navigationBar
.
titleText
);
return
()
=>
(
openBlock
(),
createBlock
(
"
uni-page-head
"
,
null
,
pageMeta
.
navigationBar
.
titleText
));
}
});
...
...
@@ -8380,7 +8381,7 @@ function createPageHeadVNode() {
return
createVNode
(
PageHead
);
}
function
createPageBodyVNode
(
ctx
)
{
return
openBlock
(),
createBlock
(
PageBody
,
{
key
:
1
},
{
return
openBlock
(),
createBlock
(
PageBody
,
{
key
:
0
},
{
default
:
withCtx
(()
=>
[
renderSlot
(
ctx
.
slots
,
"
page
"
)]),
_
:
3
});
...
...
packages/uni-h5/src/framework/components/page/index.vue
已删除
100644 → 0
浏览文件 @
91bd0273
<
template
>
<uni-page>
<page-head
v-if=
"navigationBar.type !== 'none'"
v-bind=
"navigationBar"
/>
<page-refresh
v-if=
"enablePullDownRefresh"
ref=
"refresh"
:color=
"refreshOptions.color"
:offset=
"refreshOptions.offset"
/>
<page-body
v-if=
"enablePullDownRefresh"
@
touchstart=
"_touchstart"
@
touchmove=
"_touchmove"
@
touchend=
"_touchend"
@
touchcancel=
"_touchend"
>
<slot
name=
"page"
/>
</page-body>
<page-body
v-else
>
<slot
name=
"page"
/>
</page-body>
</uni-page>
</
template
>
<
style
>
uni-page
{
display
:
block
;
width
:
100%
;
height
:
100%
;
}
</
style
>
<
script
>
import
{
NAVBAR_HEIGHT
}
from
'
@dcloudio/uni-shared
'
import
{
isPlainObject
}
from
'
@vue/shared
'
import
{
mergeTitleNView
}
from
'
./merge-title-nview
'
import
PageHead
from
'
./pageHead.vue
'
import
PageBody
from
'
./pageBody.vue
'
import
PageRefresh
from
'
./pageRefresh.vue
'
import
pullToRefresh
from
'
./pull-to-refresh
'
import
safeAreaInsets
from
'
safe-area-insets
'
export
default
{
name
:
'
Page
'
,
components
:
{
PageHead
,
PageBody
,
PageRefresh
,
},
mixins
:
[
pullToRefresh
],
props
:
{
isQuit
:
{
type
:
Boolean
,
default
:
false
,
},
isEntry
:
{
type
:
Boolean
,
default
:
false
,
},
isTabBar
:
{
type
:
Boolean
,
default
:
false
,
},
tabBarIndex
:
{
type
:
Number
,
default
:
-
1
,
},
navigationBarBackgroundColor
:
{
type
:
String
,
default
:
'
#000
'
,
},
navigationBarTextStyle
:
{
default
:
'
white
'
,
validator
(
value
)
{
return
[
'
white
'
,
'
black
'
].
indexOf
(
value
)
!==
-
1
},
},
navigationBarTitleText
:
{
type
:
String
,
default
:
''
,
},
navigationStyle
:
{
default
:
'
default
'
,
validator
(
value
)
{
return
[
'
default
'
,
'
custom
'
].
indexOf
(
value
)
!==
-
1
},
},
backgroundColor
:
{
type
:
String
,
default
:
'
#ffffff
'
,
},
backgroundTextStyle
:
{
default
:
'
dark
'
,
validator
(
value
)
{
return
[
'
dark
'
,
'
light
'
].
indexOf
(
value
)
!==
-
1
},
},
backgroundColorTop
:
{
type
:
String
,
default
:
'
#fff
'
,
},
backgroundColorBottom
:
{
type
:
String
,
default
:
'
#fff
'
,
},
enablePullDownRefresh
:
{
type
:
Boolean
,
default
:
false
,
},
onReachBottomDistance
:
{
type
:
Number
,
default
:
50
,
},
disableScroll
:
{
type
:
Boolean
,
default
:
false
,
},
titleNView
:
{
type
:
[
Boolean
,
Object
,
String
],
default
:
''
,
},
pullToRefresh
:
{
type
:
Object
,
default
()
{
return
{}
},
},
titleImage
:
{
type
:
String
,
default
:
''
,
},
transparentTitle
:
{
type
:
String
,
default
:
''
,
},
titlePenetrate
:
{
type
:
String
,
default
:
'
NO
'
,
},
navigationBarShadow
:
{
type
:
Object
,
default
()
{
return
{}
},
},
topWindow
:
{
type
:
Boolean
,
default
:
true
,
},
},
data
()
{
// 目前简单处理,存在topWindow时,始终不显示page head
let
navigationBar
=
{}
const
titleNViewTypeList
=
{
none
:
'
default
'
,
auto
:
'
transparent
'
,
always
:
'
float
'
,
}
// 将 navigationStyle 和 transparentTitle 都合并到 titleNView
let
titleNView
=
this
.
titleNView
if
(
// 无头
titleNView
===
false
||
titleNView
===
'
false
'
||
(
this
.
navigationStyle
===
'
custom
'
&&
!
isPlainObject
(
titleNView
))
||
(
this
.
transparentTitle
===
'
always
'
&&
!
isPlainObject
(
titleNView
))
)
{
titleNView
=
{
type
:
'
none
'
,
}
}
else
{
titleNView
=
Object
.
assign
(
{},
{
type
:
this
.
navigationStyle
===
'
custom
'
?
'
none
'
:
'
default
'
,
},
this
.
transparentTitle
in
titleNViewTypeList
?
{
type
:
titleNViewTypeList
[
this
.
transparentTitle
],
}
:
null
,
typeof
titleNView
===
'
object
'
?
titleNView
:
typeof
titleNView
===
'
boolean
'
?
{
type
:
titleNView
?
'
default
'
:
'
none
'
,
}
:
null
)
}
const
yesNoParseList
=
{
YES
:
true
,
NO
:
false
,
}
navigationBar
=
mergeTitleNView
(
{
loading
:
false
,
backButton
:
!
this
.
isQuit
&&
!
this
.
$route
.
meta
.
isQuit
,
// redirectTo,reLaunch时可能动态修改 meta.isQuit
backgroundColor
:
this
.
navigationBarBackgroundColor
,
textColor
:
this
.
navigationBarTextStyle
===
'
black
'
?
'
#000
'
:
'
#fff
'
,
titleText
:
this
.
navigationBarTitleText
,
titleImage
:
this
.
titleImage
,
duration
:
'
0
'
,
timingFunc
:
''
,
titlePenetrate
:
yesNoParseList
[
this
.
titlePenetrate
],
},
titleNView
)
navigationBar
.
shadow
=
this
.
navigationBarShadow
const
refreshOptions
=
Object
.
assign
(
{
support
:
true
,
color
:
'
#2BD009
'
,
style
:
'
circle
'
,
height
:
70
,
range
:
150
,
offset
:
0
,
},
this
.
pullToRefresh
)
let
offset
=
uni
.
upx2px
(
refreshOptions
.
offset
)
if
(
titleNView
.
type
!==
'
none
'
&&
titleNView
.
type
!==
'
transparent
'
)
{
offset
+=
NAVBAR_HEIGHT
+
safeAreaInsets
.
top
}
refreshOptions
.
offset
=
offset
refreshOptions
.
height
=
uni
.
upx2px
(
refreshOptions
.
height
)
refreshOptions
.
range
=
uni
.
upx2px
(
refreshOptions
.
range
)
return
{
navigationBar
,
refreshOptions
,
}
},
created
()
{
const
navigationBar
=
this
.
navigationBar
document
.
title
=
navigationBar
.
titleText
UniServiceJSBridge
.
emit
(
'
onNavigationBarChange
'
,
navigationBar
)
},
}
</
script
>
packages/uni-h5/src/framework/components/page/merge-title-nview.js
已删除
100644 → 0
浏览文件 @
91bd0273
import
{
hasOwn
,
isPlainObject
}
from
'
@vue/shared
'
/**
* app-plus titleNView
*/
export
function
mergeTitleNView
(
navigationBar
,
titleNView
)
{
if
(
isPlainObject
(
titleNView
))
{
if
(
hasOwn
(
titleNView
,
'
backgroundColor
'
))
{
navigationBar
.
backgroundColor
=
titleNView
.
backgroundColor
}
if
(
hasOwn
(
titleNView
,
'
buttons
'
))
{
navigationBar
.
buttons
=
titleNView
.
buttons
}
if
(
hasOwn
(
titleNView
,
'
titleColor
'
))
{
navigationBar
.
textColor
=
titleNView
.
titleColor
}
if
(
hasOwn
(
titleNView
,
'
titleText
'
))
{
navigationBar
.
titleText
=
titleNView
.
titleText
}
if
(
hasOwn
(
titleNView
,
'
titleSize
'
))
{
navigationBar
.
titleSize
=
titleNView
.
titleSize
}
if
(
hasOwn
(
titleNView
,
'
type
'
))
{
navigationBar
.
type
=
titleNView
.
type
}
if
(
hasOwn
(
titleNView
,
'
searchInput
'
)
&&
typeof
titleNView
.
searchInput
===
'
object
'
)
{
navigationBar
.
searchInput
=
Object
.
assign
(
{
autoFocus
:
false
,
align
:
'
center
'
,
color
:
'
#000000
'
,
backgroundColor
:
'
rgba(255,255,255,0.5)
'
,
borderRadius
:
'
0px
'
,
placeholder
:
''
,
placeholderColor
:
'
#CCCCCC
'
,
disabled
:
false
,
},
titleNView
.
searchInput
)
}
}
return
navigationBar
}
packages/uni-h5/src/framework/components/page/page
Refresh/index
.vue
→
packages/uni-h5/src/framework/components/page/page
-refresh/component
.vue
浏览文件 @
c864ff86
文件已移动
packages/uni-h5/src/framework/components/page/page
R
efresh/index.ts
→
packages/uni-h5/src/framework/components/page/page
-r
efresh/index.ts
浏览文件 @
c864ff86
文件已移动
packages/uni-h5/src/framework/components/page/pageBody.ts
浏览文件 @
c864ff86
...
...
@@ -12,9 +12,9 @@ import {
import
{
usePageMeta
}
from
'
../../plugin/provide
'
import
PageRefresh
from
'
./page
Refresh/index
.vue
'
import
PageRefresh
from
'
./page
-refresh/component
.vue
'
import
{
usePageRefresh
}
from
'
./page
R
efresh
'
import
{
usePageRefresh
}
from
'
./page
-r
efresh
'
export
default
defineComponent
({
name
:
'
PageBody
'
,
...
...
packages/uni-h5/src/framework/components/page/pageBody.vue
已删除
100644 → 0
浏览文件 @
91bd0273
<
template
>
<div></div>
<uni-page-wrapper>
<uni-page-body>
<slot
/>
</uni-page-body>
</uni-page-wrapper>
</
template
>
<
style
>
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%
;
}
</
style
>
<
script
>
// import { appendCss } from '../../../helpers/appendCss'
// import { tabBar } from '../app/observable'
export
default
{
name
:
'
PageBody
'
,
mounted
()
{
// const HEIGTH = tabBar.height || '50px'
// let cssText = `.uni-app--showtabbar uni-page-wrapper {
// display: block;
// height: calc(100% - ${HEIGTH});
// height: calc(100% - ${HEIGTH} - constant(safe-area-inset-bottom));
// height: calc(100% - ${HEIGTH} - env(safe-area-inset-bottom));
// }`
// cssText += '\n'
// cssText += `.uni-app--showtabbar uni-page-wrapper::after {
// content: "";
// display: block;
// width: 100%;
// height: ${HEIGTH};
// height: calc(${HEIGTH} + constant(safe-area-inset-bottom));
// height: calc(${HEIGTH} + env(safe-area-inset-bottom));
// }`
// cssText += '\n'
// cssText += `.uni-app--showtabbar uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
// height: calc(100% - 44px - ${HEIGTH});
// height: calc(100% - 44px - constant(safe-area-inset-top) - ${HEIGTH} - constant(safe-area-inset-bottom));
// height: calc(100% - 44px - env(safe-area-inset-top) - ${HEIGTH} - env(safe-area-inset-bottom));
// }`
// appendCss(cssText)
},
}
</
script
>
packages/uni-h5/src/framework/components/page/pageHead.ts
浏览文件 @
c864ff86
...
...
@@ -15,6 +15,10 @@ export default defineComponent({
name
:
'
PageHead
'
,
setup
()
{
const
pageMeta
=
usePageMeta
()
UniServiceJSBridge
.
emit
(
'
onNavigationBarChange
'
,
pageMeta
.
navigationBar
.
titleText
)
return
()
=>
(
openBlock
(),
createBlock
(
'
uni-page-head
'
,
null
,
pageMeta
.
navigationBar
.
titleText
)
...
...
packages/uni-h5/src/framework/components/page/pageHead.vue
已删除
100644 → 0
浏览文件 @
91bd0273
<
template
>
<uni-page-head
:uni-page-head-type=
"type"
>
<div
:style=
"
{
transitionDuration: duration,
transitionTimingFunction: timingFunc,
backgroundColor: bgColor,
color: textColor,
}"
:class="headClass"
class="uni-page-head"
>
<div
class=
"uni-page-head-hd"
>
<div
v-show=
"backButton"
class=
"uni-page-head-btn"
@
click=
"_back"
>
<i
:style=
"
{ color: color, fontSize: '27px' }" class="uni-btn-icon"
>

</i
>
</div>
<template
v-for=
"(btn, index) in btns"
>
<div
v-if=
"btn.float === 'left'"
:key=
"index"
:style=
"
{
backgroundColor:
type === 'transparent' ? btn.background : 'transparent',
width: btn.width,
}"
:badge-text="btn.badgeText"
:class="{
'uni-page-head-btn-red-dot': btn.redDot || btn.badgeText,
'uni-page-head-btn-select': btn.select,
}"
class="uni-page-head-btn"
>
<i
:style=
"_formatBtnStyle(btn)"
class=
"uni-btn-icon"
@
click=
"_onBtnClick(index)"
v-html=
"_formatBtnFontText(btn)"
/>
</div>
</
template
>
</div>
<div
v-if=
"!searchInput"
class=
"uni-page-head-bd"
>
<div
:style=
"{
fontSize: titleSize,
opacity: type === 'transparent' ? 0 : 1,
}"
class=
"uni-page-head__title"
>
<i
v-if=
"loading"
class=
"uni-loading"
/>
<img
v-if=
"titleImage !== ''"
:src=
"titleImage"
class=
"uni-page-head__title_image"
/>
<
template
v-else
>
{{
titleText
}}
</
template
>
</div>
</div>
<div
v-if=
"searchInput"
:style=
"{
'border-radius': searchInput.borderRadius,
'background-color': searchInput.backgroundColor,
}"
class=
"uni-page-head-search"
>
<div
:style=
"{ color: searchInput.placeholderColor }"
:class=
"[
`uni-page-head-search-placeholder-${
focus || text ? 'left' : searchInput.align
}`,
]"
class=
"uni-page-head-search-placeholder"
v-text=
"text || composing ? '' : searchInput.placeholder"
/>
<v-uni-input
ref=
"input"
v-model=
"text"
:focus=
"searchInput.autoFocus"
:disabled=
"searchInput.disabled"
:style=
"{ color: searchInput.color }"
:placeholder-style=
"`color:${searchInput.placeholderColor}`"
class=
"uni-page-head-search-input"
confirm-type=
"search"
@
focus=
"_focus"
@
blur=
"_blur"
@
update:value=
"_input"
/>
</div>
<div
class=
"uni-page-head-ft"
>
<
template
v-for=
"(btn, index) in btns"
>
<div
v-if=
"btn.float !== 'left'"
:key=
"index"
:style=
"
{
backgroundColor:
type === 'transparent' ? btn.background : 'transparent',
width: btn.width,
}"
:badge-text="btn.badgeText"
:class="{
'uni-page-head-btn-red-dot': btn.redDot || btn.badgeText,
'uni-page-head-btn-select': btn.select,
}"
class="uni-page-head-btn"
>
<i
:style=
"_formatBtnStyle(btn)"
class=
"uni-btn-icon"
@
click=
"_onBtnClick(index)"
v-html=
"_formatBtnFontText(btn)"
/>
</div>
</
template
>
</div>
</div>
<div
v-if=
"type !== 'transparent' && type !== 'float'"
:class=
"{ 'uni-placeholder-titlePenetrate': titlePenetrate }"
class=
"uni-placeholder"
/>
</uni-page-head>
</template>
<
style
>
uni-page-head
{
display
:
block
;
box-sizing
:
border-box
;
}
uni-page-head
.uni-page-head
{
position
:
fixed
;
left
:
var
(
--window-left
);
right
:
var
(
--window-right
);
height
:
44px
;
height
:
calc
(
44px
+
constant
(
safe-area-inset-top
));
height
:
calc
(
44px
+
env
(
safe-area-inset-top
));
padding
:
7px
3px
;
padding-top
:
calc
(
7px
+
constant
(
safe-area-inset-top
));
padding-top
:
calc
(
7px
+
env
(
safe-area-inset-top
));
display
:
flex
;
overflow
:
hidden
;
justify-content
:
space-between
;
box-sizing
:
border-box
;
z-index
:
998
;
color
:
#fff
;
background-color
:
#000
;
transition-property
:
all
;
}
uni-page-head
.uni-page-head-titlePenetrate
,
uni-page-head
.uni-page-head-titlePenetrate
.uni-page-head-bd
,
uni-page-head
.uni-page-head-titlePenetrate
.uni-page-head-bd
*
{
pointer-events
:
none
;
}
uni-page-head
.uni-page-head-titlePenetrate
*
{
pointer-events
:
auto
;
}
uni-page-head
.uni-page-head.uni-page-head-transparent
.uni-page-head-ft
>
div
{
justify-content
:
center
;
}
uni-page-head
.uni-page-head
~
.uni-placeholder
{
width
:
100%
;
height
:
44px
;
height
:
calc
(
44px
+
constant
(
safe-area-inset-top
));
height
:
calc
(
44px
+
env
(
safe-area-inset-top
));
}
uni-page-head
.uni-placeholder-titlePenetrate
{
pointer-events
:
none
;
}
uni-page-head
.uni-page-head
*
{
box-sizing
:
border-box
;
}
uni-page-head
.uni-page-head-hd
{
display
:
flex
;
align-items
:
center
;
font-size
:
16px
;
}
uni-page-head
.uni-page-head-bd
{
position
:
absolute
;
left
:
70px
;
right
:
70px
;
min-width
:
0
;
user-select
:
auto
;
}
.uni-page-head-btn
{
position
:
relative
;
width
:
auto
;
margin
:
0
2px
;
word-break
:
keep-all
;
white-space
:
pre
;
cursor
:
pointer
;
}
.uni-page-head-transparent
.uni-page-head-btn
{
display
:
flex
;
align-items
:
center
;
width
:
32px
;
height
:
32px
;
border-radius
:
50%
;
background-color
:
rgba
(
0
,
0
,
0
,
0.5
);
}
uni-page-head
.uni-btn-icon
{
overflow
:
hidden
;
min-width
:
1em
;
}
.uni-page-head-btn-red-dot
::after
{
content
:
attr
(
badge-text
);
position
:
absolute
;
right
:
0
;
top
:
0
;
background-color
:
red
;
color
:
white
;
width
:
18px
;
height
:
18px
;
line-height
:
18px
;
border-radius
:
18px
;
overflow
:
hidden
;
transform
:
scale
(
0.5
)
translate
(
40%
,
-40%
);
transform-origin
:
100%
0
;
}
.uni-page-head-btn-red-dot
[
badge-text
]
::after
{
font-size
:
12px
;
width
:
auto
;
min-width
:
18px
;
max-width
:
42px
;
text-align
:
center
;
padding
:
0
3px
;
transform
:
scale
(
0.7
)
translate
(
40%
,
-40%
);
}
.uni-page-head-btn-select
>
.uni-btn-icon
::after
{
display
:
inline-block
;
font-family
:
'unibtn'
;
content
:
'\e601'
;
margin-left
:
2px
;
transform
:
rotate
(
-90deg
)
scale
(
0.8
);
}
.uni-page-head-search
{
position
:
relative
;
display
:
flex
;
flex
:
1
;
margin
:
0
2px
;
line-height
:
30px
;
font-size
:
15px
;
}
.uni-page-head-search-input
{
width
:
100%
;
height
:
100%
;
padding-left
:
34px
;
text-align
:
left
;
}
.uni-page-head-search-placeholder
{
position
:
absolute
;
max-width
:
100%
;
height
:
100%
;
padding-left
:
34px
;
overflow
:
hidden
;
word-break
:
keep-all
;
white-space
:
pre
;
}
.uni-page-head-search-placeholder-right
{
right
:
0
;
}
.uni-page-head-search-placeholder-center
{
left
:
50%
;
transform
:
translateX
(
-50%
);
}
.uni-page-head-search-placeholder
::before
{
position
:
absolute
;
top
:
0
;
left
:
2px
;
width
:
30px
;
content
:
'\ea0e'
;
display
:
block
;
font-size
:
20px
;
font-family
:
'uni'
;
text-align
:
center
;
}
uni-page-head
.uni-page-head-ft
{
display
:
flex
;
align-items
:
center
;
flex-direction
:
row-reverse
;
font-size
:
13px
;
}
uni-page-head
.uni-page-head__title
{
font-weight
:
bold
;
font-size
:
16px
;
line-height
:
30px
;
text-align
:
center
;
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
}
uni-page-head
.uni-page-head__title
.uni-loading
{
width
:
16px
;
height
:
16px
;
margin-top
:
-3px
;
}
uni-page-head
.uni-page-head__title
.uni-page-head__title_image
{
width
:
auto
;
height
:
26px
;
vertical-align
:
middle
;
}
uni-page-head
.uni-page-head-shadow
{
overflow
:
visible
;
}
uni-page-head
.uni-page-head-shadow
::after
{
content
:
''
;
position
:
absolute
;
left
:
0
;
right
:
0
;
top
:
100%
;
height
:
5px
;
background-size
:
100%
100%
;
}
uni-page-head
.uni-page-head-shadow-grey
::after
{
background-image
:
url('https://cdn.dcloud.net.cn/img/shadow-grey.png')
;
}
uni-page-head
.uni-page-head-shadow-blue
::after
{
background-image
:
url('https://cdn.dcloud.net.cn/img/shadow-blue.png')
;
}
uni-page-head
.uni-page-head-shadow-green
::after
{
background-image
:
url('https://cdn.dcloud.net.cn/img/shadow-green.png')
;
}
uni-page-head
.uni-page-head-shadow-orange
::after
{
background-image
:
url('https://cdn.dcloud.net.cn/img/shadow-orange.png')
;
}
uni-page-head
.uni-page-head-shadow-red
::after
{
background-image
:
url('https://cdn.dcloud.net.cn/img/shadow-red.png')
;
}
uni-page-head
.uni-page-head-shadow-yellow
::after
{
background-image
:
url('https://cdn.dcloud.net.cn/img/shadow-yellow.png')
;
}
</
style
>
<
script
>
import
{
appendCss
}
from
'
../../../helpers/dom
'
import
{
getRealPath
}
from
'
../../../helpers/getRealPath
'
import
transparent
from
'
./transparent
'
const
FONTS
=
{
forward
:
'

'
,
back
:
'

'
,
share
:
'

'
,
favorite
:
'

'
,
home
:
'

'
,
menu
:
'

'
,
close
:
'

'
,
}
export
default
{
name
:
'
PageHead
'
,
mixins
:
[
transparent
],
props
:
{
backButton
:
{
type
:
Boolean
,
default
:
true
,
},
backgroundColor
:
{
type
:
String
,
default
()
{
return
this
.
type
===
'
transparent
'
?
'
#000
'
:
'
#F8F8F8
'
},
},
textColor
:
{
type
:
String
,
default
:
'
#fff
'
,
},
titleText
:
{
type
:
String
,
default
:
''
,
},
duration
:
{
type
:
String
,
default
:
'
0
'
,
},
timingFunc
:
{
type
:
String
,
default
:
''
,
},
loading
:
{
type
:
Boolean
,
default
:
false
,
},
titleSize
:
{
type
:
String
,
default
:
'
16px
'
,
},
type
:
{
default
:
'
default
'
,
validator
(
value
)
{
return
[
'
default
'
,
'
transparent
'
,
'
float
'
].
indexOf
(
value
)
!==
-
1
},
},
coverage
:
{
type
:
String
,
default
:
'
132px
'
,
},
buttons
:
{
type
:
Array
,
default
()
{
return
[]
},
},
searchInput
:
{
type
:
[
Object
,
Boolean
],
default
()
{
return
false
},
},
titleImage
:
{
type
:
String
,
default
:
''
,
},
titlePenetrate
:
{
type
:
Boolean
,
default
:
false
,
},
shadow
:
{
type
:
Object
,
default
()
{
return
{}
},
},
},
data
()
{
return
{
focus
:
false
,
text
:
''
,
composing
:
false
,
}
},
computed
:
{
btns
()
{
const
btns
=
[]
const
fonts
=
{}
if
(
this
.
buttons
.
length
)
{
this
.
buttons
.
forEach
((
button
)
=>
{
const
btn
=
Object
.
assign
({},
button
)
if
(
btn
.
fontSrc
&&
!
btn
.
fontFamily
)
{
const
fontSrc
=
(
btn
.
fontSrc
=
getRealPath
(
btn
.
fontSrc
))
let
fontFamily
if
(
fontSrc
in
fonts
)
{
fontFamily
=
fonts
[
fontSrc
]
}
else
{
fontFamily
=
`font
${
Date
.
now
()}
`
fonts
[
fontSrc
]
=
fontFamily
const
cssText
=
`@font-face{font-family: "
${
fontFamily
}
";src: url("
${
fontSrc
}
") format("truetype")}`
appendCss
(
cssText
,
'
uni-btn-font-
'
+
fontFamily
)
}
btn
.
fontFamily
=
fontFamily
}
btn
.
color
=
this
.
type
===
'
transparent
'
?
'
#fff
'
:
btn
.
color
||
this
.
textColor
let
fontSize
=
btn
.
fontSize
||
(
this
.
type
===
'
transparent
'
||
/
\\
u/
.
test
(
btn
.
text
)
?
'
22px
'
:
'
27px
'
)
if
(
/
\d
$/
.
test
(
fontSize
))
{
fontSize
+=
'
px
'
}
btn
.
fontSize
=
fontSize
btn
.
fontWeight
=
btn
.
fontWeight
||
'
normal
'
btns
.
push
(
btn
)
})
}
return
btns
},
headClass
()
{
const
shadowColorType
=
this
.
shadow
.
colorType
const
data
=
{
'
uni-page-head-transparent
'
:
this
.
type
===
'
transparent
'
,
'
uni-page-head-titlePenetrate
'
:
this
.
titlePenetrate
,
'
uni-page-head-shadow
'
:
shadowColorType
,
}
if
(
shadowColorType
)
{
data
[
`uni-page-head-shadow-
${
shadowColorType
}
`
]
=
shadowColorType
}
return
data
},
},
mounted
()
{
if
(
this
.
searchInput
)
{
const
input
=
this
.
$refs
.
input
input
.
$watch
(
'
composing
'
,
(
val
)
=>
{
this
.
composing
=
val
})
if
(
this
.
searchInput
.
disabled
)
{
input
.
$el
.
addEventListener
(
'
click
'
,
()
=>
{
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputClicked
'
,
''
)
})
}
else
{
input
.
$refs
.
input
.
addEventListener
(
'
keyup
'
,
(
event
)
=>
{
if
(
event
.
key
.
toUpperCase
()
===
'
ENTER
'
)
{
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputConfirmed
'
,
{
text
:
this
.
text
,
})
}
})
input
.
$refs
.
input
.
addEventListener
(
'
focus
'
,
()
=>
{
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputFocusChanged
'
,
{
focus
:
true
,
})
})
input
.
$refs
.
input
.
addEventListener
(
'
blur
'
,
()
=>
{
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputFocusChanged
'
,
{
focus
:
false
,
})
})
}
}
},
methods
:
{
_back
()
{
if
(
getCurrentPages
().
length
===
1
)
{
uni
.
reLaunch
({
url
:
'
/
'
,
})
}
else
{
uni
.
navigateBack
({
from
:
'
backbutton
'
,
})
}
},
_onBtnClick
(
index
)
{
UniServiceJSBridge
.
emit
(
'
onNavigationBarButtonTap
'
,
Object
.
assign
({},
this
.
btns
[
index
],
{
index
,
})
)
},
_formatBtnFontText
(
btn
)
{
if
(
btn
.
fontSrc
&&
btn
.
fontFamily
)
{
return
btn
.
text
.
replace
(
'
\\
u
'
,
'
&#x
'
)
}
else
if
(
FONTS
[
btn
.
type
])
{
return
FONTS
[
btn
.
type
]
}
return
btn
.
text
||
''
},
_formatBtnStyle
(
btn
)
{
const
style
=
{
color
:
btn
.
color
,
fontSize
:
btn
.
fontSize
,
fontWeight
:
btn
.
fontWeight
,
}
if
(
btn
.
fontFamily
)
{
style
.
fontFamily
=
btn
.
fontFamily
}
return
style
},
_focus
()
{
this
.
focus
=
true
},
_blur
()
{
this
.
focus
=
false
},
_input
(
text
)
{
UniServiceJSBridge
.
emit
(
'
onNavigationBarSearchInputChanged
'
,
{
text
,
})
},
},
}
</
script
>
packages/uni-h5/src/framework/components/page/pull-to-refresh.js
已删除
100644 → 0
浏览文件 @
91bd0273
function
processDeltaY
(
evt
,
identifier
,
startY
)
{
const
touch
=
Array
.
prototype
.
slice
.
call
(
evt
.
changedTouches
)
.
filter
((
touch
)
=>
touch
.
identifier
===
identifier
)[
0
]
if
(
!
touch
)
{
return
false
}
evt
.
deltaY
=
touch
.
pageY
-
startY
return
true
}
// const ratio = 2.2
const
PULLING
=
'
pulling
'
const
REACHED
=
'
reached
'
const
ABORTING
=
'
aborting
'
const
REFRESHING
=
'
refreshing
'
const
RESTORING
=
'
restoring
'
export
default
{
mounted
()
{
if
(
this
.
enablePullDownRefresh
)
{
this
.
refreshContainerElem
=
this
.
$refs
.
refresh
.
$el
this
.
refreshControllerElem
=
this
.
refreshContainerElem
.
querySelector
(
'
.uni-page-refresh
'
)
this
.
refreshInnerElemStyle
=
this
.
refreshControllerElem
.
querySelector
(
'
.uni-page-refresh-inner
'
).
style
UniServiceJSBridge
.
on
(
this
.
$route
.
params
.
__id__
+
'
.startPullDownRefresh
'
,
()
=>
{
if
(
!
this
.
state
)
{
this
.
state
=
REFRESHING
this
.
_addClass
()
setTimeout
(()
=>
{
this
.
_refreshing
()
},
50
)
}
}
)
UniServiceJSBridge
.
on
(
this
.
$route
.
params
.
__id__
+
'
.stopPullDownRefresh
'
,
()
=>
{
if
(
this
.
state
===
REFRESHING
)
{
this
.
_removeClass
()
this
.
state
=
RESTORING
this
.
_addClass
()
this
.
_restoring
(()
=>
{
this
.
_removeClass
()
this
.
state
=
this
.
distance
=
this
.
offset
=
null
})
}
}
)
}
},
methods
:
{
_touchstart
(
evt
)
{
const
touch
=
evt
.
changedTouches
[
0
]
this
.
touchId
=
touch
.
identifier
this
.
startY
=
touch
.
pageY
if
([
ABORTING
,
REFRESHING
,
RESTORING
].
indexOf
(
this
.
state
)
>=
0
)
{
this
.
canRefresh
=
false
}
else
{
this
.
canRefresh
=
true
}
},
_touchmove
(
evt
)
{
if
(
!
this
.
canRefresh
)
{
return
}
if
(
!
processDeltaY
(
evt
,
this
.
touchId
,
this
.
startY
))
{
return
}
let
{
deltaY
}
=
evt
if
(
(
document
.
documentElement
.
scrollTop
||
document
.
body
.
scrollTop
)
!==
0
)
{
this
.
touchId
=
null
return
}
if
(
deltaY
<
0
&&
!
this
.
state
)
{
return
}
evt
.
preventDefault
()
if
(
this
.
distance
==
null
)
{
this
.
offset
=
deltaY
this
.
state
=
PULLING
this
.
_addClass
()
}
deltaY
=
deltaY
-
this
.
offset
if
(
deltaY
<
0
)
{
deltaY
=
0
}
this
.
distance
=
deltaY
const
reached
=
deltaY
>=
this
.
refreshOptions
.
range
&&
this
.
state
!==
REACHED
const
pulling
=
deltaY
<
this
.
refreshOptions
.
range
&&
this
.
state
!==
PULLING
if
(
reached
||
pulling
)
{
this
.
_removeClass
()
this
.
state
=
this
.
state
===
REACHED
?
PULLING
:
REACHED
this
.
_addClass
()
}
this
.
_pulling
(
deltaY
)
},
_touchend
(
evt
)
{
if
(
!
processDeltaY
(
evt
,
this
.
touchId
,
this
.
startY
))
{
return
}
if
(
this
.
state
===
null
)
{
return
}
if
(
this
.
state
===
PULLING
)
{
this
.
_removeClass
()
this
.
state
=
ABORTING
this
.
_addClass
()
this
.
_aborting
(()
=>
{
this
.
_removeClass
()
this
.
state
=
this
.
distance
=
this
.
offset
=
null
})
}
else
if
(
this
.
state
===
REACHED
)
{
this
.
_removeClass
()
this
.
state
=
REFRESHING
this
.
_addClass
()
this
.
_refreshing
()
}
},
_toggleClass
(
type
)
{
if
(
!
this
.
state
)
{
return
}
const
elem
=
this
.
refreshContainerElem
if
(
elem
)
{
elem
.
classList
[
type
](
'
uni-page-refresh--
'
+
this
.
state
)
}
},
_addClass
()
{
this
.
_toggleClass
(
'
add
'
)
},
_removeClass
()
{
this
.
_toggleClass
(
'
remove
'
)
},
_pulling
(
deltaY
)
{
const
elem
=
this
.
refreshControllerElem
if
(
!
elem
)
{
return
}
const
style
=
elem
.
style
let
rotate
=
deltaY
/
this
.
refreshOptions
.
range
if
(
rotate
>
1
)
{
rotate
=
1
}
else
{
rotate
=
rotate
*
rotate
*
rotate
}
const
y
=
Math
.
round
(
deltaY
/
(
this
.
refreshOptions
.
range
/
this
.
refreshOptions
.
height
)
)
const
transform
=
y
?
'
translate3d(-50%,
'
+
y
+
'
px, 0)
'
:
0
style
.
webkitTransform
=
transform
style
.
clip
=
'
rect(
'
+
(
45
-
y
)
+
'
px,45px,45px,-5px)
'
this
.
refreshInnerElemStyle
.
webkitTransform
=
'
rotate(
'
+
360
*
rotate
+
'
deg)
'
},
_aborting
(
callback
)
{
const
elem
=
this
.
refreshControllerElem
if
(
!
elem
)
{
return
}
const
style
=
elem
.
style
if
(
style
.
webkitTransform
)
{
style
.
webkitTransition
=
'
-webkit-transform 0.3s
'
style
.
webkitTransform
=
'
translate3d(-50%, 0, 0)
'
const
abortTransitionEnd
=
function
()
{
timeout
&&
clearTimeout
(
timeout
)
elem
.
removeEventListener
(
'
webkitTransitionEnd
'
,
abortTransitionEnd
)
style
.
webkitTransition
=
''
callback
()
}
elem
.
addEventListener
(
'
webkitTransitionEnd
'
,
abortTransitionEnd
)
const
timeout
=
setTimeout
(
abortTransitionEnd
,
350
)
// 部分手机,部分情况webkitTransitionEnd不触发
}
else
{
callback
()
}
},
_refreshing
()
{
const
elem
=
this
.
refreshControllerElem
if
(
!
elem
)
{
return
}
const
style
=
elem
.
style
style
.
webkitTransition
=
'
-webkit-transform 0.2s
'
style
.
webkitTransform
=
'
translate3d(-50%,
'
+
this
.
refreshOptions
.
height
+
'
px, 0)
'
// Service 执行 refresh
UniServiceJSBridge
.
emit
(
'
onPullDownRefresh
'
,
{},
this
.
$route
.
params
.
__id__
)
},
_restoring
(
callback
)
{
const
elem
=
this
.
refreshControllerElem
if
(
!
elem
)
{
return
}
const
style
=
elem
.
style
style
.
webkitTransition
=
'
-webkit-transform 0.3s
'
style
.
webkitTransform
+=
'
scale(0.01)
'
const
restoreTransitionEnd
=
function
()
{
timeout
&&
clearTimeout
(
timeout
)
elem
.
removeEventListener
(
'
webkitTransitionEnd
'
,
restoreTransitionEnd
)
style
.
webkitTransition
=
''
style
.
webkitTransform
=
'
translate3d(-50%, 0, 0)
'
callback
()
}
elem
.
addEventListener
(
'
webkitTransitionEnd
'
,
restoreTransitionEnd
)
const
timeout
=
setTimeout
(
restoreTransitionEnd
,
350
)
// 部分手机,部分情况webkitTransitionEnd不触发
},
},
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录