diff --git a/src/platforms/h5/components/app/tabBar.vue b/src/platforms/h5/components/app/tabBar.vue
index cc029947cce22bb4a223a2a07ca077e4376034d5..26c0e16a8fc787272673a84d3ff62e6893de80da 100644
--- a/src/platforms/h5/components/app/tabBar.vue
+++ b/src/platforms/h5/components/app/tabBar.vue
@@ -40,16 +40,16 @@
:class="{'uni-tabbar__icon__diff':!item.text}"
class="uni-tabbar__icon"
:style="{width: iconWidth,height:iconWidth}"
- >
-
- {{ selectedIndex === index ? item.iconfont.selectedText : item.iconfont.text }}
+ >
+
+ {{ selectedIndex === index ? item.iconfont.selectedText : item.iconfont.text }}
import getRealPath from 'uni-platform/helpers/get-real-path'
import { isPlainObject } from 'uni-shared'
-import { publish } from 'uni-platform/service/bridge'
+import { publish } from 'uni-platform/service/bridge'
import { loadFontFace } from 'uni-core/view/bridge/subscribe/font'
function cssSupports (css) {
return window.CSS && CSS.supports && (CSS.supports(css) || CSS.supports.apply(CSS, css.split(':')))
-}
+}
const UNI_TABBAR_ICON_FONT = 'UniTabbarIconFont'
export default {
name: 'TabBar',
@@ -256,10 +256,10 @@ export default {
borderStyle: {
type: String,
default: 'black'
- },
- iconfontSrc: {
- type: String,
- default: ''
+ },
+ iconfontSrc: {
+ type: String,
+ default: ''
},
list: {
type: Array,
@@ -301,7 +301,8 @@ export default {
data () {
return {
selectedIndex: 0,
- visibleList: []
+ visibleList: [],
+ internalMidButton: {}
}
},
computed: {
@@ -345,6 +346,9 @@ export default {
this._initVisibleList()
this.setSelectedIndex()
}
+ },
+ midButton (config) {
+ this._initVisibleList()
}
},
created () {
@@ -352,15 +356,15 @@ export default {
if (item.visible === undefined) {
this.$set(item, 'visible', true)
}
- })
-
- if (this.iconfontSrc) {
- loadFontFace({
- options: {
- family: UNI_TABBAR_ICON_FONT,
- source: `url("${this.iconfontSrc}")`
- }
- })
+ })
+
+ if (this.iconfontSrc) {
+ loadFontFace({
+ options: {
+ family: UNI_TABBAR_ICON_FONT,
+ source: `url("${this.iconfontSrc}")`
+ }
+ })
}
},
beforeCreate () {
@@ -422,16 +426,16 @@ export default {
const listLength = 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]
- }
- list.splice(~~(listLength / 2), 0, Object.assign({}, this.midButton, { isMidButton: true }))
+ this.internalMidButton = Object.assign(
+ {
+ width: '50px',
+ height: '50px',
+ iconWidth: '24px'
+ },
+ this.internalMidButton,
+ this.midButton
+ )
+ list.splice(~~(listLength / 2), 0, Object.assign({}, this.internalMidButton, { isMidButton: true }))
}
return list
},
diff --git a/src/platforms/h5/service/api/ui/tab-bar.js b/src/platforms/h5/service/api/ui/tab-bar.js
index a97db85ba766e4f2a5fe2b6e7ae85835cd57997b..723fac9920723b71053c9937f8922beb4a72960d 100644
--- a/src/platforms/h5/service/api/ui/tab-bar.js
+++ b/src/platforms/h5/service/api/ui/tab-bar.js
@@ -4,7 +4,7 @@ import {
const setTabBarItemProps = ['text', 'iconPath', 'iconfont', 'selectedIconPath', 'visible']
-const setTabBarStyleProps = ['color', 'selectedColor', 'backgroundColor', 'borderStyle']
+const setTabBarStyleProps = ['color', 'selectedColor', 'backgroundColor', 'borderStyle', 'midButton']
const setTabBarBadgeProps = ['badge', 'redDot']
@@ -45,10 +45,10 @@ function setTabBar (type, args = {}) {
case 'hideTabBar':
app.$children[0].hideTabBar = true
break
- case 'setTabBarItem': {
- if (args.iconfont) {
- setProperties(tabBar.list[index].iconfont, setTabBarIconfontStyles, args.iconfont)
- args.iconfont = tabBar.list[index].iconfont
+ case 'setTabBarItem': {
+ if (args.iconfont) {
+ setProperties(tabBar.list[index].iconfont, setTabBarIconfontStyles, args.iconfont)
+ args.iconfont = tabBar.list[index].iconfont
}
setProperties(tabBar.list[index], setTabBarItemProps, args)
const pagePath = args.pagePath