Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Velpro187
uni-app
提交
1bc8c446
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,发现更多精彩内容 >>
提交
1bc8c446
编写于
11月 19, 2020
作者:
L
liuxiaohang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update(h5): tabbar支持更多配置,borderStyle、blurEffect、fontSize、iconWidth、spacing、height、midButton
上级
a05b11ad
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
186 addition
and
70 deletion
+186
-70
packages/webpack-uni-pages-loader/lib/platforms/h5.js
packages/webpack-uni-pages-loader/lib/platforms/h5.js
+2
-2
src/platforms/h5/components/app/tabBar.vue
src/platforms/h5/components/app/tabBar.vue
+156
-45
src/platforms/h5/components/page/pageBody.vue
src/platforms/h5/components/page/pageBody.vue
+28
-23
未找到文件。
packages/webpack-uni-pages-loader/lib/platforms/h5.js
浏览文件 @
1bc8c446
...
...
@@ -57,7 +57,7 @@ const getPageComponents = function (inputDir, pagesJson) {
if
(
tabBarList
.
length
)
{
// 添加全部属性,方便 Vue 响应式
pagesJson
.
tabBar
.
color
=
pagesJson
.
tabBar
.
color
||
'
#999
'
pagesJson
.
tabBar
.
selectedColor
=
pagesJson
.
tabBar
.
selectedColor
||
'
#007aff
'
pagesJson
.
tabBar
.
backgroundColor
=
pagesJson
.
tabBar
.
backgroundColor
||
'
#f7f7fa
'
pagesJson
.
tabBar
.
backgroundColor
=
pagesJson
.
tabBar
.
backgroundColor
||
''
pagesJson
.
tabBar
.
borderStyle
=
pagesJson
.
tabBar
.
borderStyle
||
'
black
'
}
...
...
@@ -458,4 +458,4 @@ ${genRegisterPageVueComponentsCode(pageComponents)}
global.__uniRoutes=[
${
genPageRoutes
(
pageComponents
).
concat
(
genSystemRoutes
()).
join
(
'
,
'
)}
]
global.UniApp && new global.UniApp();
`
}
}
src/platforms/h5/components/app/tabBar.vue
浏览文件 @
1bc8c446
<
template
>
<uni-tabbar
:class=
"['uni-tabbar-'+position]"
>
<div
:style=
"
{backgroundColor:backgroundColor}"
class="uni-tabbar"
<div
:style=
"
{
backgroundColor:tabbarBackgroundColor,
'backdrop-filter':blurEffect !== 'none' ? 'blur(10px)' : blurEffect
}"
class="uni-tabbar"
>
<div
:style=
"
{backgroundColor:borderColor}"
class="uni-tabbar-border"
<div
:style=
"
{backgroundColor:borderColor}"
class="uni-tabbar-border"
/>
<div
v-for=
"(item,index) in list"
:key=
"item.pagePath"
class=
"uni-tabbar__item"
@
click=
"_switchTab(item,index)"
<div
v-for=
"(item,index) in list"
:key=
"item.isMidButton ? index : item.pagePath"
:style=
"item.isMidButton ?
{flex:'0 0 ' + item.width} : {}"
class="uni-tabbar__item"
@click="_switchTab(item,index)"
>
<div
class=
"uni-tabbar__bd"
>
<div
v-if=
"item.iconPath"
:class=
"
{'uni-tabbar__icon__diff':!item.text}"
class="uni-tabbar__icon"
<!-- midButton iconPath -->
<div
v-if=
"item.isMidButton"
class=
"uni-tabbar__mid"
:style=
"_uniTabbarBdStyle(item)"
>
<img
:style=
"
{width: item.iconWidth,height:item.iconWidth}"
:src="_getRealPath(item.iconPath)"
>
<img
:src=
"_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)"
>
<div
v-if=
"item.redDot"
:class=
"
{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
</div>
<!-- tabbar button -->
<div
class=
"uni-tabbar__bd"
:style=
"
{height:height}"
>
<div
v-if=
"item.iconPath || item.isMidButton"
:class=
"
{'uni-tabbar__icon__diff':!item.text}"
class="uni-tabbar__icon"
:style="{width: iconWidth,height:iconWidth}"
>
<img
v-if=
"!item.isMidButton"
:src=
"_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)"
>
<div
v-if=
"item.redDot"
:class=
"
{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
>
{{
item
.
badge
}}
</div>
</div>
<div
v-if=
"item.text"
:style=
"
{color:selectedIndex===index?selectedColor:color,fontSize:item.iconPath?'10px':'14px'}"
class="uni-tabbar__label"
<div
v-if=
"item.text"
:style=
"
{
color:selectedIndex === index ? selectedColor : color,
fontSize: fontSize,
lineHeight: !item.iconPath ? 1.8 : 'normal',
marginTop: !item.iconPath ? 'inherit' : spacing
}"
class="uni-tabbar__label"
>
{{
item
.
text
}}
<div
v-if=
"item.redDot&&!item.iconPath"
:class=
"
{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
<div
v-if=
"item.redDot&&!item.iconPath"
:class=
"
{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
>
{{
item
.
badge
}}
</div>
...
...
@@ -46,7 +74,10 @@
</div>
</div>
</div>
<div
class=
"uni-placeholder"
/>
<div
class=
"uni-placeholder"
:style=
"
{height:height}"
/>
</uni-tabbar>
</
template
>
...
...
@@ -90,7 +121,6 @@
uni-tabbar
.uni-tabbar
~
.uni-placeholder
{
width
:
100%
;
height
:
50px
;
margin-bottom
:
0
;
margin-bottom
:
constant
(
safe-area-inset-bottom
);
margin-bottom
:
env
(
safe-area-inset-bottom
);
...
...
@@ -113,7 +143,6 @@
uni-tabbar
.uni-tabbar__bd
{
position
:
relative
;
height
:
50px
;
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
...
...
@@ -125,8 +154,6 @@
position
:
relative
;
display
:
inline-block
;
margin-top
:
5px
;
width
:
24px
;
height
:
24px
;
}
uni-tabbar
.uni-tabbar__icon.uni-tabbar__icon__diff
{
...
...
@@ -144,7 +171,6 @@
position
:
relative
;
text-align
:
center
;
font-size
:
10px
;
line-height
:
1.8
;
}
uni-tabbar
.uni-tabbar-border
{
...
...
@@ -179,10 +205,23 @@
text-align
:
center
;
white-space
:
nowrap
;
}
uni-tabbar
.uni-tabbar__mid
{
display
:
flex
;
justify-content
:
center
;
position
:
absolute
;
bottom
:
0
;
background-size
:
100%
100%
;
}
</
style
>
<
script
>
import
getRealPath
from
'
uni-platform/helpers/get-real-path
'
import
{
isPlainObject
}
from
'
uni-shared
'
import
{
publish
}
from
'
uni-platform/service/bridge
'
function
cssSupports
(
css
)
{
return
window
.
CSS
&&
CSS
.
supports
&&
(
CSS
.
supports
(
css
)
||
CSS
.
supports
.
apply
(
undefined
,
css
.
split
(
'
:
'
)))
}
export
default
{
name
:
'
TabBar
'
,
props
:
{
...
...
@@ -202,13 +241,11 @@ export default {
},
backgroundColor
:
{
type
:
String
,
default
:
'
#f7f7fa
'
default
:
''
},
borderStyle
:
{
default
:
'
black
'
,
validator
(
value
)
{
return
[
'
black
'
,
'
white
'
].
indexOf
(
value
)
!==
-
1
}
type
:
String
,
default
:
'
black
'
},
list
:
{
type
:
Array
,
...
...
@@ -221,6 +258,30 @@ export default {
default
:
function
()
{
return
{}
}
},
blurEffect
:
{
type
:
String
,
default
:
'
none
'
},
fontSize
:
{
type
:
String
,
default
:
'
10px
'
},
iconWidth
:
{
type
:
String
,
default
:
'
24px
'
},
spacing
:
{
type
:
String
,
default
:
'
3px
'
},
height
:
{
type
:
String
,
default
:
'
50px
'
},
midButton
:
{
type
:
Object
,
default
:
null
}
},
data
()
{
...
...
@@ -229,10 +290,29 @@ export default {
}
},
computed
:
{
tabbarBackgroundColor
()
{
// 背景色 区分 高斯模糊 分别返回
const
DefaultBgColor
=
'
#f7f7fa
'
if
(
this
.
backgroundColor
)
return
this
.
backgroundColor
if
(
cssSupports
(
'
backdrop-filter:blur(10px)
'
)
&&
this
.
blurEffect
!==
'
none
'
)
{
if
(
this
.
blurEffect
===
'
dark
'
)
{
return
'
rgb(0, 0, 0, 0.8)
'
}
if
([
'
light
'
,
'
extralight
'
].
includes
(
this
.
blurEffect
))
{
return
'
rgb(250, 250, 250, 0.8)
'
}
}
return
DefaultBgColor
},
borderColor
()
{
return
this
.
borderStyle
===
'
white
'
?
'
rgba(255, 255, 255, 0.33)
'
:
'
rgba(0, 0, 0, 0.33)
'
// 不再限制可配置颜色值
if
(
this
.
borderStyle
===
'
white
'
)
return
'
rgba(255, 255, 255, 0.33)
'
if
(
this
.
borderStyle
===
'
black
'
)
return
'
rgba(0, 0, 0, 0.33)
'
return
this
.
borderStyle
}
},
watch
:
{
...
...
@@ -249,6 +329,9 @@ export default {
}
}
},
created
()
{
this
.
_initMidButton
()
},
beforeCreate
()
{
this
.
__path__
=
this
.
$route
.
path
},
...
...
@@ -263,8 +346,13 @@ export default {
},
_switchTab
({
text
,
pagePath
pagePath
,
isMidButton
=
false
},
index
)
{
if
(
isMidButton
)
{
publish
(
'
onTabBarMidButtonTap
'
)
return
}
this
.
selectedIndex
=
index
let
url
=
'
/
'
+
pagePath
if
(
url
===
__uniRoutes
[
0
].
alias
)
{
...
...
@@ -285,7 +373,30 @@ export default {
}
else
{
UniServiceJSBridge
.
emit
(
'
onTabItemTap
'
,
detail
)
}
},
_initMidButton
()
{
const
listLength
=
this
.
list
.
length
// 偶数则添加midButton
if
(
listLength
%
2
===
0
&&
isPlainObject
(
this
.
midButton
))
{
// 给midButton赋值默认值
const
DefaultMidButton
=
{
width
:
'
50px
'
,
height
:
'
50px
'
,
iconWidth
:
'
24px
'
}
for
(
const
key
in
DefaultMidButton
)
{
this
.
midButton
[
key
]
=
this
.
midButton
[
key
]
||
DefaultMidButton
[
key
]
}
this
.
list
.
splice
(
~~
(
listLength
/
2
),
0
,
Object
.
assign
({},
this
.
midButton
,
{
isMidButton
:
true
}))
}
},
_uniTabbarBdStyle
(
item
)
{
return
Object
.
assign
({},
{
width
:
item
.
width
,
height
:
item
.
height
,
backgroundImage
:
item
.
backgroundImage
?
'
url(
\'
'
+
this
.
_getRealPath
(
item
.
backgroundImage
)
+
'
\'
)
'
:
''
})
}
}
}
</
script
>
</
script
>
src/platforms/h5/components/page/pageBody.vue
浏览文件 @
1bc8c446
...
...
@@ -18,28 +18,6 @@ uni-page-head[uni-page-head-type="default"] ~ uni-page-wrapper {
height
:
calc
(
100%
-
44px
-
env
(
safe-area-inset-top
));
}
.uni-app--showtabbar
uni-page-wrapper
{
display
:
block
;
height
:
calc
(
100%
-
50px
);
height
:
calc
(
100%
-
50px
-
constant
(
safe-area-inset-bottom
));
height
:
calc
(
100%
-
50px
-
env
(
safe-area-inset-bottom
));
}
.uni-app--showtabbar
uni-page-wrapper
::after
{
content
:
""
;
display
:
block
;
width
:
100%
;
height
:
50px
;
height
:
calc
(
50px
+
constant
(
safe-area-inset-bottom
));
height
:
calc
(
50px
+
env
(
safe-area-inset-bottom
));
}
.uni-app--showtabbar
uni-page-head
[
uni-page-head-type
=
"default"
]
~
uni-page-wrapper
{
height
:
calc
(
100%
-
44px
-
50px
);
height
:
calc
(
100%
-
44px
-
constant
(
safe-area-inset-top
)
-
50px
-
constant
(
safe-area-inset-bottom
));
height
:
calc
(
100%
-
44px
-
env
(
safe-area-inset-top
)
-
50px
-
env
(
safe-area-inset-bottom
));
}
uni-page-body
{
display
:
block
;
box-sizing
:
border-box
;
...
...
@@ -47,7 +25,34 @@ uni-page-body {
}
</
style
>
<
script
>
import
appendCss
from
'
uni-platform/helpers/append-css
'
import
{
tabBar
}
from
'
../app/observable
'
export
default
{
name
:
'
PageBody
'
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
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录