Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
genary
uni-app
提交
c8d3557e
U
uni-app
项目概览
genary
/
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,发现更多精彩内容 >>
提交
c8d3557e
编写于
5月 26, 2021
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(h5): custom-tab-bar
上级
4d22a82c
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
131 addition
and
1 deletion
+131
-1
packages/uni-components/lib/custom-tab-bar/custom-tab-bar.vue
...ages/uni-components/lib/custom-tab-bar/custom-tab-bar.vue
+126
-0
packages/uni-h5/dist/uni-h5.cjs.js
packages/uni-h5/dist/uni-h5.cjs.js
+2
-0
packages/uni-h5/dist/uni-h5.es.js
packages/uni-h5/dist/uni-h5.es.js
+1
-1
packages/uni-h5/src/index.ts
packages/uni-h5/src/index.ts
+2
-0
未找到文件。
packages/uni-
h5/src/framework/components/layout/customTabB
ar.vue
→
packages/uni-
components/lib/custom-tab-bar/custom-tab-b
ar.vue
浏览文件 @
c8d3557e
<
template
>
<
template
>
<uni-tabbar
<uni-tabbar
v-if=
"hasTabBar"
v-show=
"showTabBar"
>
v-if=
"hasTabBar"
<div
v-show=
"showTabBar"
:style=
"
{
>
'flex-direction': direction === 'vertical' ? 'column' : 'row',
<div
backgroundColor: tabBar.backgroundColor,
:style=
"
{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}"
}"
class="uni-tabbar"
class="uni-tabbar"
>
>
<div
<div
v-for=
"(item,index) in tabBarOptions.list"
v-for=
"(item, index) in tabBar.list"
:key=
"item.pagePath"
:key=
"item.pagePath"
class=
"uni-tabbar__item"
class=
"uni-tabbar__item"
@
click=
"_switchTab(item,index)"
@
click=
"switchTab(item, index)"
>
>
<div
class=
"uni-tabbar__bd"
>
<div
class=
"uni-tabbar__bd"
>
<div
<div
v-if=
"showIcon && item.iconPath"
v-if=
"showIcon && item.iconPath"
:class=
"
{'uni-tabbar__icon__diff':!item.text}"
:class=
"
{ 'uni-tabbar__icon__diff': !item.text }"
class="uni-tabbar__icon"
class="uni-tabbar__icon"
>
>
<img
:src=
"_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)"
>
<img
<div
:src=
"
v-if=
"item.redDot"
getRealPath(
:class=
"
{'uni-tabbar__badge':!!item.badge}"
selectedIndex === index
class="uni-tabbar__reddot"
? item.selectedIconPath
>
: item.iconPath
{{
item
.
badge
}}
)
</div>
"
</div>
/>
<div
<div
v-if=
"item.text"
v-if=
"item.redDot"
:style=
"
{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.color,fontSize:showIcon
&&
item.iconPath?'10px':'14px'}"
:class=
"
{ 'uni-tabbar__badge': !!item.badge }"
class="uni-tabbar__label"
class="uni-tabbar__reddot"
>
>
{{
item
.
text
}}
{{
item
.
badge
}}
<div
</div>
v-if=
"item.redDot&&(!showIcon || !item.iconPath)"
</div>
:class=
"
{'uni-tabbar__badge':!!item.badge}"
<div
class="uni-tabbar__reddot"
v-if=
"item.text"
>
:style=
"
{
{{
item
.
badge
}}
color:
</div>
selectedIndex === index ? tabBar.selectedColor : tabBar.color,
</div>
fontSize: showIcon
&&
item.iconPath ? '10px' : '14px',
</div>
}"
</div>
class="uni-tabbar__label"
</div>
>
</uni-tabbar>
{{
item
.
text
}}
</
template
>
<div
v-if=
"item.redDot && (!showIcon || !item.iconPath)"
<
script
>
:class=
"
{ 'uni-tabbar__badge': !!item.badge }"
import
getRealPath
from
'
uni-platform/helpers/get-real-path
'
class="uni-tabbar__reddot"
import
{
>
tabBar
{{
item
.
badge
}}
}
from
'
./observable
'
</div>
export
default
{
</div>
name
:
'
CustomTabBar
'
,
</div>
props
:
{
</div>
selected
:
{
</div>
type
:
Number
,
</uni-tabbar>
default
:
0
</
template
>
},
showIcon
:
{
<
script
>
type
:
Boolean
,
import
{
computed
,
ref
,
watch
}
from
'
vue
'
default
:
true
import
{
useRoute
}
from
'
vue-router
'
},
import
{
getRealPath
}
from
'
@dcloudio/uni-h5
'
direction
:
{
import
{
useTabBar
}
from
'
@dcloudio/uni-h5
'
type
:
String
,
default
:
'
horizontal
'
export
default
{
}
name
:
'
CustomTabBar
'
,
},
props
:
{
data
()
{
selected
:
{
return
{
type
:
Number
,
selectedIndex
:
this
.
selected
default
:
0
}
},
},
showIcon
:
{
computed
:
{
type
:
Boolean
,
tabBarOptions
()
{
default
:
true
return
tabBar
},
},
direction
:
{
hasTabBar
()
{
type
:
String
,
return
tabBar
.
list
&&
tabBar
.
list
.
length
default
:
'
horizontal
'
},
}
showTabBar
()
{
},
const
app
=
getApp
()
setup
(
props
,
{
emit
})
{
if
(
app
)
{
const
tabBar
=
useTabBar
()
return
!
app
.
$children
[
0
].
hideTabBar
const
route
=
useRoute
()
}
const
hasTabBar
=
computed
(()
=>
tabBar
.
list
&&
tabBar
.
list
.
length
)
return
true
const
selectedIndex
=
ref
(
props
.
selected
)
}
watch
(()
=>
props
.
selected
,
value
=>
selectedIndex
.
value
=
value
)
},
watch
(()
=>
selectedIndex
.
value
,
value
=>
tabBar
.
selectedIndex
=
value
)
watch
:
{
watch
(()
=>
{
selected
(
val
)
{
const
meta
=
route
.
meta
this
.
selectedIndex
=
val
return
[
meta
.
isTabBar
,
meta
.
route
]
// 同步至内置tabBar
},
([
isTabBar
,
pagePath
])
=>
{
const
tabBar
=
getApp
().
$children
[
0
].
$refs
.
tabBar
if
(
isTabBar
)
{
if
(
tabBar
)
{
const
index
=
tabBar
.
list
.
findIndex
(
item
=>
pagePath
===
item
.
pagePath
)
tabBar
.
selectedIndex
=
val
if
(
index
>
-
1
)
{
}
selectedIndex
.
value
=
index
},
}
'
$route
'
(
to
,
from
)
{
}
if
(
to
.
meta
.
isTabBar
)
{
})
const
index
=
tabBar
.
list
.
findIndex
(
item
=>
to
.
meta
.
pagePath
===
item
.
pagePath
)
function
switchTab
(
item
,
index
)
{
if
(
index
>
-
1
)
{
selectedIndex
.
value
=
index
this
.
selectedIndex
=
index
const
detail
=
{
}
index
,
}
text
:
item
.
text
,
}
pagePath
:
item
.
pagePath
,
},
}
methods
:
{
emit
(
'
onTabItemTap
'
,
detail
)
_getRealPath
(
filePath
)
{
}
const
SCHEME_RE
=
/^
([
a-z-
]
+:
)?\/\/
/i
const
DATA_RE
=
/^data:.*,.*/
return
{
if
(
!
(
SCHEME_RE
.
test
(
filePath
)
||
DATA_RE
.
test
(
filePath
))
&&
filePath
.
indexOf
(
'
/
'
)
!==
0
)
{
tabBar
,
filePath
=
'
/
'
+
filePath
getRealPath
,
}
selectedIndex
,
return
getRealPath
(
filePath
)
hasTabBar
,
},
showTabBar
:
true
,
_switchTab
({
switchTab
,
text
,
}
pagePath
}
},
index
)
{
}
this
.
selectedIndex
=
index
</
script
>
let
url
=
'
/
'
+
pagePath
if
(
url
===
__uniRoutes
[
0
].
alias
)
{
<
style
>
url
=
'
/
'
</
style
>
}
const
detail
=
{
index
,
text
,
pagePath
}
this
.
$emit
(
'
onTabItemTap
'
,
detail
)
if
(
this
.
$route
.
path
===
url
)
{
UniServiceJSBridge
.
emit
(
'
onTabItemTap
'
,
detail
)
}
}
}
}
</
script
>
<
style
>
</
style
>
packages/uni-h5/dist/uni-h5.cjs.js
浏览文件 @
c8d3557e
...
@@ -11407,6 +11407,7 @@ exports.disableScrollBounce = disableScrollBounce;
...
@@ -11407,6 +11407,7 @@ exports.disableScrollBounce = disableScrollBounce;
exports
.
getApp
=
getApp$1
;
exports
.
getApp
=
getApp$1
;
exports
.
getContextInfo
=
getContextInfo
;
exports
.
getContextInfo
=
getContextInfo
;
exports
.
getCurrentPages
=
getCurrentPages$1
;
exports
.
getCurrentPages
=
getCurrentPages$1
;
exports
.
getRealPath
=
getRealPath
;
exports
.
getStorage
=
getStorage
;
exports
.
getStorage
=
getStorage
;
exports
.
getStorageInfo
=
getStorageInfo
;
exports
.
getStorageInfo
=
getStorageInfo
;
exports
.
getStorageInfoSync
=
getStorageInfoSync
;
exports
.
getStorageInfoSync
=
getStorageInfoSync
;
...
@@ -11431,6 +11432,7 @@ exports.useNativeEvent = useNativeEvent;
...
@@ -11431,6 +11432,7 @@ exports.useNativeEvent = useNativeEvent;
exports
.
useOn
=
useOn
;
exports
.
useOn
=
useOn
;
exports
.
useScroller
=
useScroller
;
exports
.
useScroller
=
useScroller
;
exports
.
useSubscribe
=
useSubscribe
;
exports
.
useSubscribe
=
useSubscribe
;
exports
.
useTabBar
=
useTabBar
;
exports
.
useTouchtrack
=
useTouchtrack
;
exports
.
useTouchtrack
=
useTouchtrack
;
exports
.
useUserAction
=
useUserAction
;
exports
.
useUserAction
=
useUserAction
;
exports
.
withWebEvent
=
withWebEvent
;
exports
.
withWebEvent
=
withWebEvent
;
packages/uni-h5/dist/uni-h5.es.js
浏览文件 @
c8d3557e
...
@@ -20677,4 +20677,4 @@ var index = /* @__PURE__ */ defineSystemComponent({
...
@@ -20677,4 +20677,4 @@ var index = /* @__PURE__ */ defineSystemComponent({
return openBlock(), createBlock("div", clazz, [loadingVNode]);
return openBlock(), createBlock("div", clazz, [loadingVNode]);
}
}
});
});
export {$emit, $off, $on, $once, index$1 as AsyncErrorComponent, index as AsyncLoadingComponent, _sfc_main$2 as Audio, index$r as Button, index$q as Canvas, index$o as Checkbox, index$p as CheckboxGroup, index$3 as CoverImage, index$4 as CoverView, index$n as Editor, index$t as Form, Friction, index$m as Icon, index$l as Image, Input, index$s as Label, LayoutComponent, Map$1 as Map, MovableArea, MovableView, index$k as Navigator, index$2 as PageComponent, _sfc_main$1 as Picker, PickerView, PickerViewColumn, index$j as Progress, index$h as Radio, index$i as RadioGroup, ResizeSensor, index$g as RichText, ScrollView, Scroller, index$f as Slider, Spring, Swiper, SwiperItem, index$d as Switch, index$c as Text, index$b as Textarea, UniServiceJSBridge$1 as UniServiceJSBridge, UniViewJSBridge$1 as UniViewJSBridge, index$7 as Video, index$a as View, index$6 as WebView, addInterceptor, addPhoneContact, arrayBufferToBase64, base64ToArrayBuffer, canIUse, canvasGetImageData, canvasPutImageData, canvasToTempFilePath, chooseFile, chooseImage, chooseLocation, chooseVideo, clearStorage, clearStorageSync, closeSocket, connectSocket, createAnimation, createCameraContext, createCanvasContext, createInnerAudioContext, createIntersectionObserver, createLivePlayerContext, createMapContext, createMediaQueryObserver, createSelectorQuery, createVideoContext, cssBackdropFilter, cssConstant, cssEnv, cssVar, defineBuiltInComponent, defineSystemComponent, disableScrollBounce, downloadFile, getApp$1 as getApp, getContextInfo, getCurrentPages$1 as getCurrentPages, getFileInfo, getImageInfo, getLeftWindowStyle, getLocation, getNetworkType, getProvider, getRe
corderManager, getRightWindowStyle, getSavedFileInfo, getSavedFileList, getScreenBrightness, getSelectedTextRange, getStorage, getStorageInfo, getStorageInfoSync, getStorageSync, getSystemInfo, getSystemInfoSync, getTopWindowStyle, getVideoInfo, hideKeyboard, hideLeftWindow, hideLoading, hideNavigationBarLoading, hideRightWindow, hideTabBar, hideTabBarRedDot, hideToast, hideTopWindow, initScrollBounce, loadFontFace, login, makePhoneCall, navigateBack, navigateTo, offAccelerometerChange, offCompassChange, offNetworkStatusChange, offWindowResize, onAccelerometerChange, onCompassChange, onGyroscopeChange, onMemoryWarning, onNetworkStatusChange, onSocketClose, onSocketError, onSocketMessage, onSocketOpen, onTabBarMidButtonTap, onUserCaptureScreen, onWindowResize, openDocument, openLocation, pageScrollTo, index$8 as plugin, preloadPage, previewImage, promiseInterceptor, reLaunch, redirectTo, removeInterceptor, removeSavedFileInfo, removeStorage, removeStorageSync, removeTabBarBadge, request, saveFile, saveImageToPhotosAlbum, saveVideoToPhotosAlbum, scanCode, sendSocketMessage, setKeepScreenOn, setLeftWindowStyle, setNavigationBarColor, setNavigationBarTitle, setRightWindowStyle, setScreenBrightness, setStorage, setStorageSync, setTabBarBadge, setTabBarItem, setTabBarStyle, setTopWindowStyle, setupApp, setupPage, showActionSheet, showLeftWindow, showLoading, showModal, showNavigationBarLoading, showRightWindow, showTabBar, showTabBarRedDot, showToast, showTopWindow, startAccelerometer, startCompass, startGyroscope, startPullDownRefresh, stopAccelerometer, stopCompass, stopGyroscope, stopPullDownRefresh, switchTab, uni$1 as uni, uniFormKey, uploadFile, upx2px, useAttrs, useBooleanAttr, useContextInfo, useCustomEvent, useNativeEvent, useOn, useScroller, useSubscribe
, useTouchtrack, useUserAction, vibrateLong, vibrateShort, withWebEvent};
export {$emit, $off, $on, $once, index$1 as AsyncErrorComponent, index as AsyncLoadingComponent, _sfc_main$2 as Audio, index$r as Button, index$q as Canvas, index$o as Checkbox, index$p as CheckboxGroup, index$3 as CoverImage, index$4 as CoverView, index$n as Editor, index$t as Form, Friction, index$m as Icon, index$l as Image, Input, index$s as Label, LayoutComponent, Map$1 as Map, MovableArea, MovableView, index$k as Navigator, index$2 as PageComponent, _sfc_main$1 as Picker, PickerView, PickerViewColumn, index$j as Progress, index$h as Radio, index$i as RadioGroup, ResizeSensor, index$g as RichText, ScrollView, Scroller, index$f as Slider, Spring, Swiper, SwiperItem, index$d as Switch, index$c as Text, index$b as Textarea, UniServiceJSBridge$1 as UniServiceJSBridge, UniViewJSBridge$1 as UniViewJSBridge, index$7 as Video, index$a as View, index$6 as WebView, addInterceptor, addPhoneContact, arrayBufferToBase64, base64ToArrayBuffer, canIUse, canvasGetImageData, canvasPutImageData, canvasToTempFilePath, chooseFile, chooseImage, chooseLocation, chooseVideo, clearStorage, clearStorageSync, closeSocket, connectSocket, createAnimation, createCameraContext, createCanvasContext, createInnerAudioContext, createIntersectionObserver, createLivePlayerContext, createMapContext, createMediaQueryObserver, createSelectorQuery, createVideoContext, cssBackdropFilter, cssConstant, cssEnv, cssVar, defineBuiltInComponent, defineSystemComponent, disableScrollBounce, downloadFile, getApp$1 as getApp, getContextInfo, getCurrentPages$1 as getCurrentPages, getFileInfo, getImageInfo, getLeftWindowStyle, getLocation, getNetworkType, getProvider, getRe
alPath, getRecorderManager, getRightWindowStyle, getSavedFileInfo, getSavedFileList, getScreenBrightness, getSelectedTextRange, getStorage, getStorageInfo, getStorageInfoSync, getStorageSync, getSystemInfo, getSystemInfoSync, getTopWindowStyle, getVideoInfo, hideKeyboard, hideLeftWindow, hideLoading, hideNavigationBarLoading, hideRightWindow, hideTabBar, hideTabBarRedDot, hideToast, hideTopWindow, initScrollBounce, loadFontFace, login, makePhoneCall, navigateBack, navigateTo, offAccelerometerChange, offCompassChange, offNetworkStatusChange, offWindowResize, onAccelerometerChange, onCompassChange, onGyroscopeChange, onMemoryWarning, onNetworkStatusChange, onSocketClose, onSocketError, onSocketMessage, onSocketOpen, onTabBarMidButtonTap, onUserCaptureScreen, onWindowResize, openDocument, openLocation, pageScrollTo, index$8 as plugin, preloadPage, previewImage, promiseInterceptor, reLaunch, redirectTo, removeInterceptor, removeSavedFileInfo, removeStorage, removeStorageSync, removeTabBarBadge, request, saveFile, saveImageToPhotosAlbum, saveVideoToPhotosAlbum, scanCode, sendSocketMessage, setKeepScreenOn, setLeftWindowStyle, setNavigationBarColor, setNavigationBarTitle, setRightWindowStyle, setScreenBrightness, setStorage, setStorageSync, setTabBarBadge, setTabBarItem, setTabBarStyle, setTopWindowStyle, setupApp, setupPage, showActionSheet, showLeftWindow, showLoading, showModal, showNavigationBarLoading, showRightWindow, showTabBar, showTabBarRedDot, showToast, showTopWindow, startAccelerometer, startCompass, startGyroscope, startPullDownRefresh, stopAccelerometer, stopCompass, stopGyroscope, stopPullDownRefresh, switchTab, uni$1 as uni, uniFormKey, uploadFile, upx2px, useAttrs, useBooleanAttr, useContextInfo, useCustomEvent, useNativeEvent, useOn, useScroller, useSubscribe, useTabBar
, useTouchtrack, useUserAction, vibrateLong, vibrateShort, withWebEvent};
packages/uni-h5/src/index.ts
浏览文件 @
c8d3557e
...
@@ -17,3 +17,5 @@ export { default as LayoutComponent } from './framework/components/layout/index'
...
@@ -17,3 +17,5 @@ export { default as LayoutComponent } from './framework/components/layout/index'
export
{
default
as
PageComponent
}
from
'
./framework/components/page/index
'
export
{
default
as
PageComponent
}
from
'
./framework/components/page/index
'
export
{
default
as
AsyncErrorComponent
}
from
'
./framework/components/async-error/index
'
export
{
default
as
AsyncErrorComponent
}
from
'
./framework/components/async-error/index
'
export
{
default
as
AsyncLoadingComponent
}
from
'
./framework/components/async-loading
'
export
{
default
as
AsyncLoadingComponent
}
from
'
./framework/components/async-loading
'
export
*
from
'
./framework/setup/state
'
export
{
getRealPath
}
from
'
./platform
'
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录