From d296eaf4e1429bc1dcd6f06992f12e2b7060cfb6 Mon Sep 17 00:00:00 2001
From: juvenile <1050299953@qq.com>
Date: Thu, 28 Oct 2021 17:19:04 +0800
Subject: [PATCH] Modify the text and slider color when the tabs and full
screen tabs are active
---
pages/componentsA/tabs/index.vue | 29 +++++++++++++++----
pages/template/order/index.vue | 2 +-
.../u-tabs-swiper/u-tabs-swiper.vue | 16 ++++++----
uview-ui/components/u-tabs/u-tabs.vue | 16 ++++++----
4 files changed, 47 insertions(+), 16 deletions(-)
diff --git a/pages/componentsA/tabs/index.vue b/pages/componentsA/tabs/index.vue
index 8ccdb763..1ef97004 100644
--- a/pages/componentsA/tabs/index.vue
+++ b/pages/componentsA/tabs/index.vue
@@ -4,7 +4,7 @@
演示效果
-
@@ -22,7 +22,11 @@
活动选项字颜色
-
+
+
+
+ 活动选项滑块颜色
+
字体加粗
@@ -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]
@@ -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:
@@ -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) {
diff --git a/pages/template/order/index.vue b/pages/template/order/index.vue
index dffd2c75..c67906ff 100644
--- a/pages/template/order/index.vue
+++ b/pages/template/order/index.vue
@@ -2,7 +2,7 @@
-
+
diff --git a/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue b/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
index a53e2618..4c616b66 100644
--- a/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
+++ b/uview-ui/components/u-tabs-swiper/u-tabs-swiper.vue
@@ -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）
@@ -88,8 +89,13 @@
type: [String, Number],
default: 750
},
- // 选中项的主题颜色
- activeColor: {
+ // 选中项的文字颜色
+ activeTextColor: {
+ type: String,
+ default: '#2979ff'
+ },
+ // 选中项的滑块颜色
+ activeBarColor: {
type: String,
default: '#2979ff'
},
@@ -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'
@@ -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);
diff --git a/uview-ui/components/u-tabs/u-tabs.vue b/uview-ui/components/u-tabs/u-tabs.vue
index 0c596585..435c9212 100644
--- a/uview-ui/components/u-tabs/u-tabs.vue
+++ b/uview-ui/components/u-tabs/u-tabs.vue
@@ -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的样式，对象形式
@@ -81,8 +82,13 @@
type: [String, Number],
default: 0.5
},
- // 选中项的主题颜色
- activeColor: {
+ // 选中项的文字颜色
+ activeTextColor: {
+ type: String,
+ default: '#2979ff'
+ },
+ // 选中项的滑块颜色
+ activeBarColor: {
type: String,
default: '#2979ff'
},
@@ -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,
// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
@@ -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 {