|
@@ -3,35 +3,18 @@
|
|
<view class="uv-tabs__wrapper">
|
|
<view class="uv-tabs__wrapper">
|
|
<slot name="left" />
|
|
<slot name="left" />
|
|
<view class="uv-tabs__wrapper__scroll-view-wrapper">
|
|
<view class="uv-tabs__wrapper__scroll-view-wrapper">
|
|
- <scroll-view
|
|
|
|
- :scroll-x="scrollable"
|
|
|
|
- :scroll-left="scrollLeft"
|
|
|
|
- scroll-with-animation
|
|
|
|
- class="uv-tabs__wrapper__scroll-view"
|
|
|
|
- :show-scrollbar="false"
|
|
|
|
- ref="uv-tabs__wrapper__scroll-view"
|
|
|
|
- >
|
|
|
|
- <view
|
|
|
|
- class="uv-tabs__wrapper__nav"
|
|
|
|
- ref="uv-tabs__wrapper__nav"
|
|
|
|
- :style="{
|
|
|
|
|
|
+ <scroll-view :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation
|
|
|
|
+ class="uv-tabs__wrapper__scroll-view" :show-scrollbar="false" ref="uv-tabs__wrapper__scroll-view">
|
|
|
|
+ <view class="uv-tabs__wrapper__nav" ref="uv-tabs__wrapper__nav" :style="{
|
|
flex: scrollable ? '' : 1
|
|
flex: scrollable ? '' : 1
|
|
- }"
|
|
|
|
- >
|
|
|
|
- <view
|
|
|
|
- class="uv-tabs__wrapper__nav__item"
|
|
|
|
- v-for="(item, index) in list"
|
|
|
|
- :key="index"
|
|
|
|
- @tap="clickHandler(item, index)"
|
|
|
|
- :ref="`uv-tabs__wrapper__nav__item-${index}`"
|
|
|
|
|
|
+ }">
|
|
|
|
+ <view class="uv-tabs__wrapper__nav__item" v-for="(item, index) in list" :key="index"
|
|
|
|
+ @tap="clickHandler(item, index)" :ref="`uv-tabs__wrapper__nav__item-${index}`"
|
|
:style="[{flex: scrollable ? '' : 1},$uv.addStyle(itemStyle)]"
|
|
:style="[{flex: scrollable ? '' : 1},$uv.addStyle(itemStyle)]"
|
|
- :class="[`uv-tabs__wrapper__nav__item-${index}`, item.disabled && 'uv-tabs__wrapper__nav__item--disabled']"
|
|
|
|
- >
|
|
|
|
- <text
|
|
|
|
- :class="[item.disabled && 'uv-tabs__wrapper__nav__item__text--disabled']"
|
|
|
|
|
|
+ :class="[`uv-tabs__wrapper__nav__item-${index}`, item.disabled && 'uv-tabs__wrapper__nav__item--disabled']">
|
|
|
|
+ <text :class="[item.disabled && 'uv-tabs__wrapper__nav__item__text--disabled']"
|
|
class="uv-tabs__wrapper__nav__item__text"
|
|
class="uv-tabs__wrapper__nav__item__text"
|
|
- :style="[textStyle(index)]"
|
|
|
|
- >{{ item[keyName] }}</text>
|
|
|
|
|
|
+ :style="[textStyle(index)]">{{ item[keyName] }}</text>
|
|
<uv-badge
|
|
<uv-badge
|
|
:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
|
|
:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
|
|
:isDot="item.badge && item.badge.isDot || propsBadge.isDot"
|
|
:isDot="item.badge && item.badge.isDot || propsBadge.isDot"
|
|
@@ -44,37 +27,28 @@
|
|
:shape="item.badge && item.badge.shape || propsBadge.shape"
|
|
:shape="item.badge && item.badge.shape || propsBadge.shape"
|
|
:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
|
|
:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
|
|
:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
|
|
:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
|
|
- customStyle="margin-left: 4px;"
|
|
|
|
- ></uv-badge>
|
|
|
|
|
|
+ customStyle="margin-left: 4px;"></uv-badge>
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef APP-NVUE -->
|
|
<!-- #ifdef APP-NVUE -->
|
|
- <view
|
|
|
|
- class="uv-tabs__wrapper__nav__line"
|
|
|
|
- ref="uv-tabs__wrapper__nav__line"
|
|
|
|
- :style="[{
|
|
|
|
|
|
+ <view class="uv-tabs__wrapper__nav__line" ref="uv-tabs__wrapper__nav__line" :style="[{
|
|
width: $uv.addUnit(lineWidth),
|
|
width: $uv.addUnit(lineWidth),
|
|
height: firstTime?0:$uv.addUnit(lineHeight),
|
|
height: firstTime?0:$uv.addUnit(lineHeight),
|
|
background: lineColor,
|
|
background: lineColor,
|
|
backgroundSize: lineBgSize
|
|
backgroundSize: lineBgSize
|
|
- }]"
|
|
|
|
- >
|
|
|
|
|
|
+ }]">
|
|
<!-- #endif -->
|
|
<!-- #endif -->
|
|
- <!-- #ifndef APP-NVUE -->
|
|
|
|
- <view
|
|
|
|
- class="uv-tabs__wrapper__nav__line"
|
|
|
|
- ref="uv-tabs__wrapper__nav__line"
|
|
|
|
- :style="[{
|
|
|
|
|
|
+ <!-- #ifndef APP-NVUE -->
|
|
|
|
+ <view class="uv-tabs__wrapper__nav__line" ref="uv-tabs__wrapper__nav__line" :style="[{
|
|
width: $uv.addUnit(lineWidth),
|
|
width: $uv.addUnit(lineWidth),
|
|
transform: `translate(${lineOffsetLeft}px)`,
|
|
transform: `translate(${lineOffsetLeft}px)`,
|
|
transitionDuration: `${firstTime ? 0 : duration}ms`,
|
|
transitionDuration: `${firstTime ? 0 : duration}ms`,
|
|
height: firstTime?0:$uv.addUnit(lineHeight),
|
|
height: firstTime?0:$uv.addUnit(lineHeight),
|
|
background: lineColor,
|
|
background: lineColor,
|
|
backgroundSize: lineBgSize,
|
|
backgroundSize: lineBgSize,
|
|
- }]"
|
|
|
|
- >
|
|
|
|
- <!-- #endif -->
|
|
|
|
|
|
+ }]">
|
|
|
|
+ <!-- #endif -->
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
- </view>
|
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<slot name="right" />
|
|
<slot name="right" />
|
|
@@ -116,7 +90,7 @@
|
|
*/
|
|
*/
|
|
export default {
|
|
export default {
|
|
name: 'uv-tabs',
|
|
name: 'uv-tabs',
|
|
- emits: ['click','change'],
|
|
|
|
|
|
+ emits: ['click', 'change'],
|
|
mixins: [mpMixin, mixin, props],
|
|
mixins: [mpMixin, mixin, props],
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
@@ -134,7 +108,7 @@
|
|
watch: {
|
|
watch: {
|
|
current: {
|
|
current: {
|
|
immediate: true,
|
|
immediate: true,
|
|
- handler (newValue, oldValue) {
|
|
|
|
|
|
+ handler(newValue, oldValue) {
|
|
// 内外部值不相等时,才尝试移动滑块
|
|
// 内外部值不相等时,才尝试移动滑块
|
|
if (newValue !== this.innerCurrent) {
|
|
if (newValue !== this.innerCurrent) {
|
|
this.innerCurrent = newValue
|
|
this.innerCurrent = newValue
|
|
@@ -183,7 +157,7 @@
|
|
let lineOffsetLeft = this.list
|
|
let lineOffsetLeft = this.list
|
|
.slice(0, this.innerCurrent)
|
|
.slice(0, this.innerCurrent)
|
|
.reduce((total, curr) => total + curr.rect.width, 0);
|
|
.reduce((total, curr) => total + curr.rect.width, 0);
|
|
- // 获取下划线的数值px表示法
|
|
|
|
|
|
+ // 获取下划线的数值px表示法
|
|
let lineWidth = this.$uv.getPx(this.lineWidth);
|
|
let lineWidth = this.$uv.getPx(this.lineWidth);
|
|
// 如果传的值未带单位+设置了全局单位,则带上单位计算,这样才没有误差
|
|
// 如果传的值未带单位+设置了全局单位,则带上单位计算,这样才没有误差
|
|
if (this.$uv.test.number(this.lineWidth) && this.$uv.unit) {
|
|
if (this.$uv.test.number(this.lineWidth) && this.$uv.unit) {
|
|
@@ -224,7 +198,7 @@
|
|
})
|
|
})
|
|
// 如果disabled状态,返回
|
|
// 如果disabled状态,返回
|
|
if (item.disabled) return
|
|
if (item.disabled) return
|
|
- if(this.innerCurrent != index) {
|
|
|
|
|
|
+ if (this.innerCurrent != index) {
|
|
this.$emit('change', {
|
|
this.$emit('change', {
|
|
...item,
|
|
...item,
|
|
index
|
|
index
|
|
@@ -232,14 +206,14 @@
|
|
}
|
|
}
|
|
this.innerCurrent = index
|
|
this.innerCurrent = index
|
|
// #ifndef APP-NVUE
|
|
// #ifndef APP-NVUE
|
|
- this.$nextTick(()=>{
|
|
|
|
|
|
+ this.$nextTick(() => {
|
|
this.resize()
|
|
this.resize()
|
|
})
|
|
})
|
|
// #endif
|
|
// #endif
|
|
// #ifdef APP-NVUE
|
|
// #ifdef APP-NVUE
|
|
- this.$nextTick(()=>{
|
|
|
|
|
|
+ this.$nextTick(() => {
|
|
// nvue模式下再给点延时,确保万无一失
|
|
// nvue模式下再给点延时,确保万无一失
|
|
- this.$uv.sleep(30).then(res=>{
|
|
|
|
|
|
+ this.$uv.sleep(30).then(res => {
|
|
this.resize()
|
|
this.resize()
|
|
});
|
|
});
|
|
})
|
|
})
|
|
@@ -271,7 +245,7 @@
|
|
// 获取所有标签的尺寸
|
|
// 获取所有标签的尺寸
|
|
resize() {
|
|
resize() {
|
|
// 如果不存在list,则不处理
|
|
// 如果不存在list,则不处理
|
|
- if(this.list.length === 0) {
|
|
|
|
|
|
+ if (this.list.length === 0) {
|
|
return
|
|
return
|
|
}
|
|
}
|
|
Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
|
|
Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
|
|
@@ -330,6 +304,7 @@
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
|
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
|
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
|
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
|
|
|
+
|
|
.uv-tabs {
|
|
.uv-tabs {
|
|
|
|
|
|
&__wrapper {
|
|
&__wrapper {
|
|
@@ -387,4 +362,4 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|