Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
weixin_38335589
uni-app
提交
ac1c9ca4
U
uni-app
项目概览
weixin_38335589
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
ac1c9ca4
编写于
11月 16, 2020
作者:
fxy060608
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(h5): add matchMedia for tabBar
上级
eb417de0
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
131 addition
and
72 deletion
+131
-72
packages/webpack-uni-pages-loader/lib/util.js
packages/webpack-uni-pages-loader/lib/util.js
+4
-1
src/platforms/h5/components/app/customTabBar.vue
src/platforms/h5/components/app/customTabBar.vue
+31
-26
src/platforms/h5/components/app/index.vue
src/platforms/h5/components/app/index.vue
+28
-2
src/platforms/h5/components/app/layout.vue
src/platforms/h5/components/app/layout.vue
+8
-5
src/platforms/h5/components/app/tabBar.vue
src/platforms/h5/components/app/tabBar.vue
+59
-32
yarn.lock
yarn.lock
+1
-6
未找到文件。
packages/webpack-uni-pages-loader/lib/util.js
浏览文件 @
ac1c9ca4
...
...
@@ -41,11 +41,14 @@ function hasOwn (obj, key) {
return
_hasOwnProperty
.
call
(
obj
,
key
)
}
function
trimMPJson
(
json
)
{
function
trimMPJson
(
json
)
{
delete
json
.
maxWidth
delete
json
.
topWindow
delete
json
.
leftWindow
delete
json
.
rightWindow
if
(
json
.
tabBar
)
{
delete
json
.
tabBar
.
matchMedia
}
return
json
}
...
...
src/platforms/h5/components/app/customTabBar.vue
浏览文件 @
ac1c9ca4
<
template
>
<uni-tabbar
v-if=
"hasTabBar"
v-show=
"showTabBar"
<uni-tabbar
v-if=
"hasTabBar"
v-show=
"showTabBar"
>
<div
<div
:style=
"
{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}"
class="uni-tabbar"
class="uni-tabbar"
>
<div
v-for=
"(item,index) in tabBarOptions.list"
:key=
"item.pagePath"
class=
"uni-tabbar__item"
@
click=
"_switchTab(item,index)"
<div
v-for=
"(item,index) in tabBarOptions.list"
:key=
"item.pagePath"
class=
"uni-tabbar__item"
@
click=
"_switchTab(item,index)"
>
<div
class=
"uni-tabbar__bd"
>
<div
v-if=
"showIcon && item.iconPath"
:class=
"
{'uni-tabbar__icon__diff':!item.text}"
class="uni-tabbar__icon"
<div
v-if=
"showIcon && item.iconPath"
:class=
"
{'uni-tabbar__icon__diff':!item.text}"
class="uni-tabbar__icon"
>
<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
v-if=
"item.redDot"
:class=
"
{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
>
{{
item
.
badge
}}
</div>
</div>
<div
v-if=
"item.text"
<div
v-if=
"item.text"
:style=
"
{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.color,fontSize:showIcon
&&
item.iconPath?'10px':'14px'}"
class="uni-tabbar__label"
class="uni-tabbar__label"
>
{{
item
.
text
}}
<div
v-if=
"item.redDot&&(!showIcon || !item.iconPath)"
:class=
"
{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
<div
v-if=
"item.redDot&&(!showIcon || !item.iconPath)"
:class=
"
{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
>
{{
item
.
badge
}}
</div>
...
...
@@ -92,6 +92,11 @@ export default {
watch
:
{
selected
(
val
)
{
this
.
selectedIndex
=
val
// 同步至内置tabBar
const
tabBar
=
getApp
().
$children
[
0
].
$refs
.
tabBar
if
(
tabBar
)
{
tabBar
.
selectedIndex
=
val
}
},
'
$route
'
(
to
,
from
)
{
if
(
to
.
meta
.
isTabBar
)
{
...
...
@@ -135,4 +140,4 @@ export default {
</
script
>
<
style
>
</
style
>
</
style
>
src/platforms/h5/components/app/index.vue
浏览文件 @
ac1c9ca4
...
...
@@ -5,10 +5,12 @@
:router-key=
"key"
:keep-alive-include=
"keepAliveInclude"
@
maxWidth=
"onMaxWidth"
@
layout=
"onLayout"
/>
<tab-bar
v-if=
"hasTabBar"
v-show=
"showTabBar"
ref=
"tabBar"
v-bind=
"tabBarOptions"
/>
<toast
...
...
@@ -36,6 +38,7 @@
</template>
<
script
>
import
{
hasOwn
,
isPlainObject
}
from
'
uni-shared
'
...
...
@@ -68,7 +71,9 @@ export default {
transitionName
:
'
fade
'
,
hideTabBar
:
false
,
sysComponents
:
this
.
$sysComponents
,
showMaxWidth
:
false
showLayout
:
false
,
showMaxWidth
:
false
,
tabBarMediaQuery
:
false
}
},
computed
:
{
...
...
@@ -82,7 +87,11 @@ export default {
return
tabBar
.
list
&&
tabBar
.
list
.
length
},
showTabBar
()
{
return
this
.
$route
.
meta
.
isTabBar
&&
!
this
.
hideTabBar
return
!
this
.
hideTabBar
&&
(
this
.
$route
.
meta
.
isTabBar
||
(
this
.
showLayout
&&
this
.
tabBarMediaQuery
)
// 宽屏且符合tabBar的media
)
}
},
watch
:
{
...
...
@@ -107,6 +116,7 @@ export default {
if
(
uni
.
canIUse
(
'
css.var
'
))
{
document
.
documentElement
.
style
.
setProperty
(
'
--status-bar-height
'
,
'
0px
'
)
}
this
.
initMediaQuery
()
},
mounted
()
{
window
.
addEventListener
(
'
message
'
,
function
(
evt
)
{
...
...
@@ -123,8 +133,24 @@ export default {
})
},
methods
:
{
onLayout
(
showLayout
)
{
this
.
showLayout
=
showLayout
},
onMaxWidth
(
showMaxWidth
)
{
this
.
showMaxWidth
=
showMaxWidth
},
initMediaQuery
()
{
if
(
window
.
matchMedia
&&
tabBar
.
matchMedia
&&
hasOwn
(
tabBar
.
matchMedia
,
'
minWidth
'
)
)
{
const
mediaQueryList
=
window
.
matchMedia
(
'
(min-width:
'
+
tabBar
.
matchMedia
.
minWidth
+
'
px)
'
)
mediaQueryList
.
addListener
((
e
)
=>
{
this
.
tabBarMediaQuery
=
e
.
matches
})
this
.
tabBarMediaQuery
=
mediaQueryList
.
matches
}
}
}
}
...
...
src/platforms/h5/components/app/layout.vue
浏览文件 @
ac1c9ca4
...
...
@@ -180,6 +180,9 @@ export default {
$route
()
{
this
.
checkMaxWidth
()
},
showLayout
()
{
this
.
checkLayout
()
},
showTopWindow
(
newVal
,
val
)
{
if
(
newVal
)
{
this
.
$nextTick
(
this
.
onTopWindowInit
)
...
...
@@ -242,6 +245,7 @@ export default {
this
.
initMaxWidth
()
},
mounted
()
{
this
.
checkLayout
()
this
.
checkMaxWidth
()
},
methods
:
{
...
...
@@ -275,7 +279,10 @@ export default {
this
.
checkMaxWidth
()
})
},
checkMaxWidth
()
{
checkLayout
()
{
this
.
$emit
(
'
layout
'
,
this
.
showLayout
)
},
checkMaxWidth
()
{
const
windowWidth
=
document
.
body
.
clientWidth
const
maxWidth
=
parseInt
(
this
.
$route
.
meta
.
maxWidth
)
let
showMaxWidth
=
false
...
...
@@ -423,10 +430,6 @@ export default {
position
:
fixed
;
}
.uni-app--showlayout
+
uni-tabbar
{
display
:
none
;
}
.uni-top-window
{
position
:
fixed
;
left
:
var
(
--window-margin
);
...
...
src/platforms/h5/components/app/tabBar.vue
浏览文件 @
ac1c9ca4
<
template
>
<uni-tabbar
:class=
"['uni-tabbar-'+position]"
>
<div
:style=
"
{backgroundColor:backgroundColor}"
class="uni-tabbar"
<div
:style=
"
{backgroundColor:backgroundColor}"
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.pagePath"
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"
<div
v-if=
"item.iconPath"
:class=
"
{'uni-tabbar__icon__diff':!item.text}"
class="uni-tabbar__icon"
>
<img
:src=
"_getRealPath(
$route.meta.pagePath===item.pagePath
?item.selectedIconPath:item.iconPath)"
>
<div
v-if=
"item.redDot"
:class=
"
{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
<img
: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:
$route.meta.pagePath===item.pagePath
?selectedColor:color,fontSize:item.iconPath?'10px':'14px'}"
class="uni-tabbar__label"
<div
v-if=
"item.text"
:style=
"
{color:
selectedIndex===index
?selectedColor:color,fontSize:item.iconPath?'10px':'14px'}"
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>
...
...
@@ -73,6 +73,14 @@
right
:
var
(
--window-right
);
}
.uni-app--showlayout
+
uni-tabbar
.uni-tabbar-top
,
.uni-app--showlayout
+
uni-tabbar
.uni-tabbar-bottom
,
.uni-app--showlayout
+
uni-tabbar
.uni-tabbar-top
.uni-tabbar
,
.uni-app--showlayout
+
uni-tabbar
.uni-tabbar-bottom
.uni-tabbar
{
left
:
var
(
--window-margin
);
right
:
var
(
--window-margin
);
}
uni-tabbar
.uni-tabbar-bottom
.uni-tabbar
{
bottom
:
0
;
padding-bottom
:
0
;
...
...
@@ -207,6 +215,17 @@ export default {
default
:
function
()
{
return
[]
}
},
matchMedia
:
{
type
:
Object
,
default
:
function
()
{
return
{}
}
}
},
data
()
{
return
{
selectedIndex
:
0
}
},
computed
:
{
...
...
@@ -217,9 +236,16 @@ export default {
}
},
watch
:
{
'
$route
'
(
to
,
from
)
{
if
(
to
.
meta
.
isTabBar
)
{
this
.
__path__
=
to
.
path
$route
:
{
immediate
:
true
,
handler
(
to
)
{
if
(
to
.
meta
.
isTabBar
)
{
this
.
__path__
=
to
.
path
const
index
=
this
.
list
.
findIndex
(
item
=>
to
.
meta
.
pagePath
===
item
.
pagePath
)
if
(
index
>
-
1
)
{
this
.
selectedIndex
=
index
}
}
}
}
},
...
...
@@ -239,6 +265,7 @@ export default {
text
,
pagePath
},
index
)
{
this
.
selectedIndex
=
index
let
url
=
'
/
'
+
pagePath
if
(
url
===
__uniRoutes
[
0
].
alias
)
{
url
=
'
/
'
...
...
@@ -261,4 +288,4 @@ export default {
}
}
}
</
script
>
</
script
>
yarn.lock
浏览文件 @
ac1c9ca4
...
...
@@ -7680,16 +7680,11 @@ p-try@^2.0.0:
resolved "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
pako@^1.0.11:
pako@^1.0.11
, pako@~1.0.5
:
version "1.0.11"
resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
pako@~1.0.5:
version "1.0.11"
resolved "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
parallel-transform@^1.1.0:
version "1.2.0"
resolved "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录