From 3bd962a6d7f61239c020e2dbbeb7341e5b842dd1 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期二, 21 四月 2026 11:46:41 +0800
Subject: [PATCH] 推送
---
node_modules/uview-plus/components/u-tabs/u-tabs.vue | 178 +++++++++++++++++++++++++++-------------------------------
1 files changed, 83 insertions(+), 95 deletions(-)
diff --git a/node_modules/uview-plus/components/u-tabs/u-tabs.vue b/node_modules/uview-plus/components/u-tabs/u-tabs.vue
index e55e0ec..109f894 100644
--- a/node_modules/uview-plus/components/u-tabs/u-tabs.vue
+++ b/node_modules/uview-plus/components/u-tabs/u-tabs.vue
@@ -3,49 +3,28 @@
<view class="u-tabs__wrapper">
<slot name="left" />
<view class="u-tabs__wrapper__scroll-view-wrapper">
- <scroll-view
- :scroll-x="scrollable"
- :scroll-left="scrollLeft"
- scroll-with-animation
- class="u-tabs__wrapper__scroll-view"
- :show-scrollbar="false"
- ref="u-tabs__wrapper__scroll-view"
- >
- <view
- class="u-tabs__wrapper__nav"
- ref="u-tabs__wrapper__nav"
- >
- <view
- class="u-tabs__wrapper__nav__item"
- v-for="(item, index) in list"
- :key="index"
- @tap="clickHandler(item, index)"
- @longpress="longPressHandler(item,index)"
+ <scroll-view :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation
+ class="u-tabs__wrapper__scroll-view" :show-scrollbar="false" ref="u-tabs__wrapper__scroll-view">
+ <view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
+ <view class="u-tabs__wrapper__nav__item" v-for="(item, index) in tabList" :key="index"
+ @tap="clickHandler(item, index)" @longpress="longPressHandler(item,index)"
:ref="`u-tabs__wrapper__nav__item-${index}`"
- :style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]"
- :class="[`u-tabs__wrapper__nav__item-${index}`,
+ :style="[addStyle(itemStyle), {flex: scrollable ? '' : 1}]" :class="[`u-tabs__wrapper__nav__item-${index}`,
item.disabled && 'u-tabs__wrapper__nav__item--disabled',
- innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : '']"
- >
+ innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : '']">
<slot v-if="$slots.icon" name="icon" :item="item" :keyName="keyName" :index="index" />
<template v-else>
<view class="u-tabs__wrapper__nav__item__prefix-icon" v-if="item.icon">
- <up-icon
- :name="item.icon"
- :customStyle="addStyle(iconStyle)"
- ></up-icon>
+ <up-icon :name="item.icon" :customStyle="addStyle(iconStyle)"></up-icon>
</view>
</template>
<slot v-if="$slots.content" name="content" :item="item" :keyName="keyName" :index="index" />
- <slot v-else-if="!$slots.content && ($slots.default || $slots.$default)"
- :item="item" :keyName="keyName" :index="index" />
- <text v-else
- :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
+ <slot v-else-if="!$slots.content && ($slots.default || $slots.$default)" :item="item"
+ :keyName="keyName" :index="index" />
+ <text v-else :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
class="u-tabs__wrapper__nav__item__text"
- :style="[textStyle(index)]"
- >{{ item[keyName] }}</text>
- <u-badge
- :show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
+ :style="[textStyle(index)]">{{ item[keyName] }}</text>
+ <u-badge :show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
:isDot="item.badge && item.badge.isDot || propsBadge.isDot"
:value="item.badge && item.badge.value || propsBadge.value"
:max="item.badge && item.badge.max || propsBadge.max"
@@ -56,35 +35,28 @@
:shape="item.badge && item.badge.shape || propsBadge.shape"
:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
- customStyle="margin-left: 4px;"
- ></u-badge>
+ customStyle="margin-left: 4px;"></u-badge>
</view>
<!-- #ifdef APP-NVUE -->
- <view
- class="u-tabs__wrapper__nav__line"
- ref="u-tabs__wrapper__nav__line"
- :style="[{
+ <view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line" :style="[{
width: addUnit(lineWidth),
height: addUnit(lineHeight),
background: lineColor,
backgroundSize: lineBgSize,
- }]"
- >
+ }]">
</view>
<!-- #endif -->
<!-- #ifndef APP-NVUE -->
- <view
- class="u-tabs__wrapper__nav__line"
- ref="u-tabs__wrapper__nav__line"
+ <view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line"
:style="[{
width: addUnit(lineWidth),
transform: `translate(${lineOffsetLeft}px)`,
- transitionDuration: `${firstTime ? 0 : duration}ms`,
+ transitionDuration: `${duration}ms`,
height: addUnit(lineHeight),
background: lineColor,
backgroundSize: lineBgSize,
- }]"
- >
+ display: lineShow ? 'block': 'none'
+ }]">
</view>
<!-- #endif -->
</view>
@@ -100,11 +72,25 @@
const animation = uni.requireNativePlugin('animation')
const dom = uni.requireNativePlugin('dom')
// #endif
- import { props } from './props';
- import { mpMixin } from '../../libs/mixin/mpMixin';
- import { mixin } from '../../libs/mixin/mixin';
+ import {
+ props
+ } from './props';
+ import {
+ mpMixin
+ } from '../../libs/mixin/mpMixin';
+ import {
+ mixin
+ } from '../../libs/mixin/mixin';
import defProps from '../../libs/config/props.js'
- import { addUnit, addStyle, deepMerge, getPx, sleep, getWindowInfo } from '../../libs/function/index';
+ import {
+ addUnit,
+ addStyle,
+ deepMerge,
+ deepClone,
+ getPx,
+ sleep,
+ getWindowInfo
+ } from '../../libs/function/index';
/**
* Tabs 鏍囩
* @description tabs鏍囩缁勪欢锛屽湪鏍囩澶氱殑鏃跺�欙紝鍙互閰嶇疆涓哄乏鍙虫粦鍔紝鏍囩灏戠殑鏃跺�欙紝鍙互绂佹婊戝姩銆� 璇ョ粍浠剁殑涓�涓壒鐐规槸閰嶇疆涓烘粴鍔ㄦā寮忔椂锛屾縺娲荤殑tab浼氳嚜鍔ㄧЩ鍔ㄥ埌缁勪欢鐨勪腑闂翠綅缃��
@@ -122,10 +108,11 @@
mixins: [mpMixin, mixin, props],
data() {
return {
- firstTime: true,
+ tabList: [],
scrollLeft: 0,
scrollViewWidth: 0,
lineOffsetLeft: 0,
+ lineShow: false,
tabsRect: {
left: 0
},
@@ -136,7 +123,7 @@
watch: {
current: {
immediate: true,
- handler (newValue, oldValue) {
+ handler(newValue, oldValue) {
// 鍐呭閮ㄥ�间笉鐩哥瓑鏃讹紝鎵嶅皾璇曠Щ鍔ㄦ粦鍧�
if (newValue !== this.innerCurrent) {
if (typeof newValue == 'string') {
@@ -151,10 +138,16 @@
}
},
// list鍙樺寲鏃讹紝閲嶆柊娓叉煋list鍚勯」淇℃伅
- list() {
- this.$nextTick(() => {
- this.resize()
- })
+ list: {
+ handler(newValue, oldValue) {
+ // 閲嶆柊鎷疯礉涓�浠絣ist鐢ㄤ簬澧炲姞鍏朵粬棰濆淇℃伅澶勭悊鍚庡鑷撮噸澶嶇洃鍚殑姝诲惊鐜�
+ this.tabList = deepClone(newValue);
+ this.$nextTick(() => {
+ this.resize()
+ })
+ },
+ immediate: true,
+ deep: true,
}
},
computed: {
@@ -162,11 +155,11 @@
return index => {
const style = {}
// 鍙栧綋鏈熸槸鍚︽縺娲荤殑鏍峰紡
- const customeStyle = (index == this.innerCurrent)
- ? addStyle(this.activeStyle)
- : addStyle(this.inactiveStyle)
+ const customeStyle = (index == this.innerCurrent) ?
+ addStyle(this.activeStyle) :
+ addStyle(this.inactiveStyle)
// 濡傛灉褰撳墠鑿滃崟琚鐢紝鍒欏姞涓婂搴旈鑹诧紝闇�瑕佸湪姝ゅ仛澶勭悊锛屾槸鍥犱负nvue涓嬶紝鏃犳硶鍦╯tyle鏍峰紡涓�氳繃!import瑕嗙洊鏍囩鐨勫唴鑱旀牱寮�
- if (this.list[index].disabled) {
+ if (this.tabList[index].disabled) {
style.color = '#c8c9cc'
}
return deepMerge(customeStyle, style)
@@ -178,42 +171,37 @@
},
async mounted() {
this.init()
- this.windowResizeCallback = (res) => {
- this.init()
- }
- uni.onWindowResize(this.windowResizeCallback)
+ this.windowResizeCallback = (res) => {
+ this.init()
+ }
+ uni.onWindowResize(this.windowResizeCallback)
},
- beforeUnmount() {
- uni.offWindowResize(this.windowResizeCallback)
- },
+ beforeUnmount() {
+ uni.offWindowResize(this.windowResizeCallback)
+ },
emits: ['click', 'longPress', 'change', 'update:current'],
methods: {
addStyle,
addUnit,
setLineLeft() {
- const tabItem = this.list[this.innerCurrent];
+ const tabItem = this.tabList[this.innerCurrent];
if (!tabItem) {
return;
}
// 鑾峰彇婊戝潡璇ョЩ鍔ㄧ殑浣嶇疆
- let lineOffsetLeft = this.list
+ let lineOffsetLeft = this.tabList
.slice(0, this.innerCurrent)
.reduce((total, curr) => total + curr.rect.width, 0);
- // 鑾峰彇涓嬪垝绾跨殑鏁板�紁x琛ㄧず娉�
+ // 鑾峰彇涓嬪垝绾跨殑鏁板�紁x琛ㄧず娉�
const lineWidth = getPx(this.lineWidth);
this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
// #ifdef APP-NVUE
// 绗竴娆＄Щ鍔ㄦ粦鍧楋紝鏃犻渶杩囨浮鏃堕棿
- this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
+ this.animation(this.lineOffsetLeft, parseInt(this.duration))
// #endif
- // 濡傛灉鏄涓�娆℃墽琛屾鏂规硶锛岃婊戝潡鍦ㄥ垵濮嬪寲鏃讹紝鐬棿婊戝姩鍒扮涓�涓猼ab item鐨勪腑闂�
- // 杩欓噷闇�瑕佷竴涓畾鏃跺櫒锛屽洜涓哄湪闈瀗vue涓嬶紝鏄洿鎺ラ�氳繃style缁戝畾杩囨浮鏃堕棿锛岄渶瑕佺瓑鍏惰繃娓″畬鎴愬悗锛屽啀璁剧疆涓篺alse(闈炵涓�娆＄Щ鍔ㄦ粦鍧�)
- if (this.firstTime) {
- setTimeout(() => {
- this.firstTime = false
- }, 10);
- }
+ // 濡傛灉鏄涓�娆℃墽琛屾鏂规硶锛屾粦鍧楅粯璁や笉鏄剧ず锛屽湪鍔犺浇瀹屾垚鍚庤繘琛屾樉绀�
+ if (!this.lineShow) this.lineShow = true;
},
// nvue涓嬭缃粦鍧楃殑浣嶇疆
animation(x, duration = 0) {
@@ -239,9 +227,9 @@
// 濡傛灉鐐瑰嚮褰撳墠涓嶈Е鍙慶hange
if (this.innerCurrent == index) return
this.innerCurrent = index
- this.$nextTick(() => {
- this.resize()
- })
+ this.$nextTick(() => {
+ this.resize()
+ })
this.$emit('update:current', index)
this.$emit('change', {
...item,
@@ -263,11 +251,11 @@
setScrollLeft() {
// 褰撳墠娲诲姩tab鐨勫竷灞�淇℃伅锛屾湁tab鑿滃崟鐨剋idth鍜宭eft(涓哄厓绱犲乏杈圭晫鍒扮埗鍏冪礌宸﹁竟鐣岀殑璺濈)绛変俊鎭�
if (this.innerCurrent < 0) {
- this.innerCurrent = 0;
- }
- const tabRect = this.list[this.innerCurrent]
+ this.innerCurrent = 0;
+ }
+ const tabRect = this.tabList[this.innerCurrent]
// 绱姞寰楀埌褰撳墠item鍒板乏杈圭殑璺濈
- const offsetLeft = this.list
+ const offsetLeft = this.tabList
.slice(0, this.innerCurrent)
.reduce((total, curr) => {
return total + curr.rect.width
@@ -284,13 +272,14 @@
// 鑾峰彇鎵�鏈夋爣绛剧殑灏哄
resize() {
// 濡傛灉涓嶅瓨鍦╨ist锛屽垯涓嶅鐞�
- if(this.list.length === 0) {
+ if (this.tabList.length === 0) {
return
}
Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
// 鍏煎鍦╯wiper缁勪欢涓娇鐢�
if (tabsRect.left > tabsRect.width) {
- tabsRect.right = tabsRect.right - Math.floor(tabsRect.left / tabsRect.width) * tabsRect.width
+ tabsRect.right = tabsRect.right - Math.floor(tabsRect.left / tabsRect.width) * tabsRect
+ .width
tabsRect.left = tabsRect.left % tabsRect.width
}
// console.log(tabsRect)
@@ -300,7 +289,7 @@
// 璁＄畻scroll-view鐨勫搴︼紝杩欓噷
this.scrollViewWidth += item.width
// 鍙﹀璁＄畻姣忎竴涓猧tem鐨勪腑蹇冪偣X杞村潗鏍�
- this.list[index].rect = item
+ this.tabList[index].rect = item
})
// 鑾峰彇浜唗abs鐨勫昂瀵镐箣鍚庯紝璁剧疆婊戝潡鐨勪綅缃�
this.setLineLeft()
@@ -316,9 +305,9 @@
// 鑾峰彇鎵�鏈夋爣绛剧殑灏哄
getAllItemRect() {
return new Promise(resolve => {
- const promiseAllArr = this.list.map((item, index) => this.queryRect(
- `u-tabs__wrapper__nav__item-${index}`, true))
- Promise.all(promiseAllArr).then(sizes => resolve(sizes))
+ const promiseAllArr = this.tabList.map((item, index) => this.queryRect(
+ `u-tabs__wrapper__nav__item-${index}`, true));
+ Promise.all(promiseAllArr).then(sizes => resolve(sizes));
})
},
// 鑾峰彇鍚勪釜鏍囩鐨勫昂瀵�
@@ -348,7 +337,6 @@
</script>
<style lang="scss" scoped>
-
.u-tabs {
&__wrapper {
@@ -389,7 +377,7 @@
&__text {
font-size: 15px;
color: $u-content-color;
- white-space: nowrap !important;
+ white-space: nowrap !important;
&--disabled {
color: $u-disabled-color !important;
--
Gitblit v1.9.3