Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
U
uview-ui
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
李晖
uview-ui
Commits
6a276a4a
Commit
6a276a4a
authored
Oct 10, 2020
by
TtTao
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
新增:tabs标签卡增加badge徽标数设置
parent
0c771f2e
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
36 additions
and
8 deletions
+36
-8
u-tabs-swiper.vue
uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
+17
-4
u-tabs.vue
uview-ui/components/u-tabs/u-tabs.vue
+19
-4
No files found.
uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
View file @
6a276a4a
...
...
@@ -7,6 +7,7 @@
<view
class=
"u-tabs-scroll-box"
:class=
"
{'u-tabs-scorll-flex': !isScroll}">
<view
class=
"u-tabs-item"
:style=
"[tabItemStyle(index)]"
v-for=
"(item, index) in getTabs"
:key=
"index"
:class=
"[preId + index]"
@
tap=
"emit(index)"
>
<u-badge
:count=
"item[count] || item['count'] || 0"
:offset=
"offset"
size=
"mini"
></u-badge>
{{
item
[
name
]
||
item
[
'
name
'
]
}}
</view>
<view
v-if=
"showBar"
class=
"u-scroll-bar"
:style=
"[tabBarStyle]"
></view>
...
...
@@ -18,9 +19,7 @@
<
script
>
import
colorGradient
from
'
../../libs/function/colorGradient
'
;
let
color
=
colorGradient
;
const
{
windowWidth
}
=
uni
.
getSystemInfoSync
();
const
{
windowWidth
}
=
uni
.
getSystemInfoSync
();
const
preId
=
'
UEl_
'
;
/**
...
...
@@ -43,6 +42,8 @@
* @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40)
* @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff)
* @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name)
* @property {String} count 组件内部读取的list参数中的属性名(badge徽标数),同name属性的使用,见官网说明(默认count)
* @property {Array} offset 设置badge徽标数的位置偏移,格式为 [x, y],也即设置的为top和right的值,单位rpx(默认[5, 20])
* @property {Boolean} bold 激活选项的字体是否加粗(默认true)
* @event {Function} change 点击标签时触发
* @example <u-tabs-swiper ref="tabs" :list="list" :is-scroll="false"></u-tabs-swiper>
...
...
@@ -127,11 +128,23 @@
type
:
String
,
default
:
'
window
'
},
// 读取传入的数组对象的属性
// 读取传入的数组对象的属性
(tab名称)
name
:
{
type
:
String
,
default
:
'
name
'
},
// 读取传入的数组对象的属性(徽标数)
count
:
{
type
:
String
,
default
:
'
count
'
},
// 徽标数位置偏移
offset
:
{
type
:
Array
,
default
:
()
=>
{
return
[
5
,
20
]
}
},
// 活动tab字体是否加粗
bold
:
{
type
:
Boolean
,
...
...
uview-ui/components/u-tabs/u-tabs.vue
View file @
6a276a4a
...
...
@@ -8,6 +8,7 @@
<view
class=
"u-scroll-box"
:class=
"
{'u-tabs-scorll-flex': !isScroll}">
<view
class=
"u-tab-item u-line-1"
:id=
"'u-tab-item-' + index"
v-for=
"(item, index) in list"
:key=
"index"
@
tap=
"clickTab(index)"
:style=
"[tabItemStyle(index)]"
>
<u-badge
:count=
"item[count] || item['count'] || 0"
:offset=
"offset"
size=
"mini"
></u-badge>
{{
item
[
name
]
||
item
[
'
name
'
]
}}
</view>
<view
v-if=
"showBar"
class=
"u-tab-bar"
:style=
"[tabBarStyle]"
></view>
...
...
@@ -38,7 +39,9 @@
* @property {String Number} item-width 标签的宽度(默认auto)
* @property {String Number} gutter 单个tab标签的左右内边距之和,单位rpx(默认40)
* @property {String} bg-color tabs导航栏的背景颜色(默认#ffffff)
* @property {String} name 组件内部读取的list参数中的属性名,见官网说明(默认name)
* @property {String} name 组件内部读取的list参数中的属性名(tab名称),见官网说明(默认name)
* @property {String} count 组件内部读取的list参数中的属性名(badge徽标数),同name属性的使用,见官网说明(默认count)
* @property {Array} offset 设置badge徽标数的位置偏移,格式为 [x, y],也即设置的为top和right的值,单位rpx(默认[5, 20])
* @property {Boolean} bold 激活选项的字体是否加粗(默认true)
* @event {Function} change 点击标签时触发
* @example <u-tabs ref="tabs" :list="list" :is-scroll="false"></u-tabs>
...
...
@@ -108,11 +111,23 @@
type
:
String
,
default
:
'
#ffffff
'
},
// 读取传入的数组对象的属性
// 读取传入的数组对象的属性
(tab名称)
name
:
{
type
:
String
,
default
:
'
name
'
},
// 读取传入的数组对象的属性(徽标数)
count
:
{
type
:
String
,
default
:
'
count
'
},
// 徽标数位置偏移
offset
:
{
type
:
Array
,
default
:
()
=>
{
return
[
5
,
20
]
}
},
// 活动tab字体是否加粗
bold
:
{
type
:
Boolean
,
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment