Skip to content

Modify the text and slider color when the tabs and full screen tabs a… #1156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hideInEye wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Modify the text and slider color when the tabs and full screen tabs a… #1156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions pages/componentsA/tabs/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<view class="u-demo-title">演示效果</view>
<view class="u-demo-area">
<u-toast ref="uToast"></u-toast>
<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-color="activeColor" :list="list"
<u-tabs v-if="control" bg-color="#fafafa" :bold="bold" :active-text-color="activeTextColor" :active-bar-color="activeBarColor" :list="list"
@change="change" :current="current" :is-scroll="isScroll" :offset="offset"></u-tabs>
</view>
</view>
Expand All @@ -22,7 +22,11 @@
</view>
<view class="u-config-item">
<view class="u-item-title">活动选项字颜色</view>
<u-subsection mode="button" :list="['primary', 'success', 'error', 'warning']" @change="colorChange"></u-subsection>
<u-subsection mode="button" :list="['primary', 'success', 'error', 'warning']" @change="textChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">活动选项滑块颜色</view>
<u-subsection mode="button" :list="['primary', 'success', 'error', 'warning']" @change="barChange"></u-subsection>
</view>
<view class="u-config-item">
<view class="u-item-title">字体加粗</view>
Expand Down Expand Up @@ -62,7 +66,8 @@
sectionCurrent: 0,
isScroll: true,
tabCountIndex: 0,
activeColor: this.$u.color['primary'],
activeTextColor: this.$u.color['primary'],
activeBarColor: this.$u.color['primary'],
bold: true,
control: true,
offset: [5, -5]
Expand Down Expand Up @@ -114,7 +119,21 @@
this.control = true;
})
},
colorChange(e) {
textChange(e) {
let color = 'primary';
switch(e) {
case 0:
color = 'primary';break;
case 1:
color = 'success';break;
case 2:
color = 'error';break;
case 3:
color = 'warning';break;
}
this.activeTextColor = this.$u.color[color];
},
barChange(e) {
let color = 'primary';
switch(e) {
case 0:
Expand All @@ -126,7 +145,7 @@
case 3:
color = 'warning';break;
}
this.activeColor = this.$u.color[color];
this.activeBarColor = this.$u.color[color];
},
boldChange(e) {
switch(e) {
Expand Down
2 changes: 1 addition & 1 deletion pages/template/order/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<view>
<view class="wrap">
<view class="u-tabs-box">
<u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
<u-tabs-swiper activeTextColor="#f29100" activeBarColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
</view>
<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
<swiper-item class="swiper-item">
Expand Down
16 changes: 11 additions & 5 deletions uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
* @property {String Number} height 导航栏的高度，单位rpx（默认80）
* @property {String Number} font-size tab文字大小，单位rpx（默认30）
* @property {String Number} swiper-width tabs组件外部swiper的宽度，默认为屏幕宽度，单位rpx（默认750）
* @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff）
* @property {String} active-text-color 激活tab文字的颜色（默认#2979ff）
* @property {String} active-bar-color 滑块激活的颜色（默认#2979ff）
* @property {String} inactive-color tabs文字颜色（默认#303133）
* @property {String Number} bar-width 滑块宽度，单位rpx（默认40）
* @property {String Number} bar-height 滑块高度，单位rpx（默认6）
Expand Down Expand Up @@ -88,8 +89,13 @@
type: [String, Number],
default: 750
},
// 选中项的主题颜色
activeColor: {
// 选中项的文字颜色
activeTextColor: {
type: String,
default: '#2979ff'
},
// 选中项的滑块颜色
activeBarColor: {
type: String,
default: '#2979ff'
},
Expand Down Expand Up @@ -216,7 +222,7 @@
height: this.height + 'rpx',
lineHeight: this.height + 'rpx',
padding: `0 ${this.gutter / 2}rpx`,
color: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeColor) : this.inactiveColor,
color: this.tabsInfo.length > 0 ? (this.tabsInfo[index] ? this.tabsInfo[index].color : this.activeTextColor) : this.inactiveColor,
fontSize: this.fontSize + 'rpx',
zIndex: this.zIndex + 2,
fontWeight: (index == this.getCurrent && this.bold) ? 'bold' : 'normal'
Expand All @@ -234,7 +240,7 @@
width: this.barWidthPx + 'px',
height: this.barHeight + 'rpx',
borderRadius: '100px',
backgroundColor: this.activeColor,
backgroundColor: this.activeBarColor,
left: this.scrollBarLeft + 'px'
};
return Object.assign(style, this.barStyle);
Expand Down
16 changes: 11 additions & 5 deletions uview-ui/components/u-tabs/u-tabs.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
* @property {String Number} height 导航栏的高度，单位rpx（默认80）
* @property {String Number} font-size tab文字大小，单位rpx（默认30）
* @property {String Number} duration 滑块移动一次所需的时间，单位秒（默认0.5）
* @property {String} active-color 滑块和激活tab文字的颜色（默认#2979ff）
* @property {String} active-text-color 激活tab文字的颜色（默认#2979ff）
* @property {String} active-bar-color 滑块激活的颜色（默认#2979ff）
* @property {String} inactive-color tabs文字颜色（默认#303133）
* @property {String Number} bar-width 滑块宽度，单位rpx（默认40）
* @property {Object} active-item-style 活动tabs item的样式，对象形式
Expand Down Expand Up @@ -81,8 +82,13 @@
type: [String, Number],
default: 0.5
},
// 选中项的主题颜色
activeColor: {
// 选中项的文字颜色
activeTextColor: {
type: String,
default: '#2979ff'
},
// 选中项的滑块颜色
activeBarColor: {
type: String,
default: '#2979ff'
},
Expand Down Expand Up @@ -200,7 +206,7 @@
transform: `translate(${this.scrollBarLeft}px, -100%)`,
// 滑块在页面渲染后第一次滑动时，无需动画效果
'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
'background-color': this.activeColor,
'background-color': this.activeBarColor,
height: this.barHeight + 'rpx',
opacity: this.barFirstTimeMove ? 0 : 1,
// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
Expand All @@ -224,7 +230,7 @@
// 字体加粗
if (index == this.currentIndex && this.bold) style.fontWeight = 'bold';
if (index == this.currentIndex) {
style.color = this.activeColor;
style.color = this.activeTextColor;
// 给选中的tab item添加外部自定义的样式
style = Object.assign(style, this.activeItemStyle);
} else {
Expand Down