@ -14,7 +14,7 @@
< view class = "z-tabs-list" : style = "[tabsListStyle, {marginTop: -finalBottomSpace+'px'}]" >
< view :ref ="`z-tabs-item-${index}`" :id ="`z-tabs-item-${index}`" class = "z-tabs-item" :style ="[tabStyle]" v-for ="(item,index) in list" :key="index" @click="tabsClick(index,item)" >
< view class = "z-tabs-item-title-container" >
< text :class ="{'z-tabs-item-title-rpx':unit==='rpx','z-tabs-item-title-px':unit==='px','z-tabs-item-title-disabled':item.disabled}"
< text :class ="{'z-tabs-item-title-rpx':unit==='rpx','z-tabs-item-title-px':unit==='px','z-tabs-item-title-disabled':item.disabled}"
: style = "[{color:item.disabled?disabledColor:(currentIndex===index?activeColor:inactiveColor)},item.disabled?disabledStyle:(currentIndex===index?activeStyle:inactiveStyle)]" >
{ { item [ nameKey ] || item } }
< / text >
@ -31,14 +31,14 @@
: style = "[{background:activeColor},finalDotStyle]"
<!-- # endif -- >
/ >
< / view >
< / view >
< / view >
< / s c r o l l - v i e w >
< / view >
< view class = "z-tabs-right" >
< slot name = "right" / >
< / view >
< / view >
< / template >
@ -48,7 +48,7 @@
const weexAnimation = weex . requireModule ( 'animation' ) ;
/ / # e n d i f
import zTabsConfig from './config/index'
/ / # i f d e f A P P - H A R M O N Y
let screenWidth = 0 ;
/ / # e n d i f
@ -79,7 +79,7 @@
return uni . upx2px ( rpx ) ;
/ / # e n d i f
}
/ * *
* z - tabs 标签
* @ description 一个简单轻量的tabs标签 , 全平台兼容 , 支持nvue 、 vue3
@ -120,7 +120,7 @@
bottomDotXForIndex : 0 ,
showBottomDot : false ,
shouldSetDx : true ,
barCalcedWidth : 0 ,
pxBarWidth : 0 ,
scrollLeft : 0 ,
@ -296,7 +296,8 @@
handler ( newVal ) {
this . _handleListChange ( newVal ) ;
} ,
immediate : false
immediate : false ,
deep : true
} ,
bottomDotX ( newVal ) {
if ( newVal >= 0 ) {
@ -346,7 +347,7 @@
stl [ 'width' ] = this . finalTabWidth + 'px' ;
} else {
delete stl . width ;
}
}
return stl ;
} ,
tabsListStyle ( ) {
@ -441,7 +442,7 @@
/ / # e n d i f
setTimeout ( ( ) => {
this . _getNodeClientRect ( '.z-tabs-scroll-view-conatiner' ) . then ( res => {
if ( res ) {
if ( res ) {
if ( ! res [ 0 ] . width && tryCount < 10 ) {
setTimeout ( ( ) => {
tryCount ++ ;
@ -499,7 +500,7 @@
} ) . exec ( ) ;
} )
/ / # e n d i f
/ / # i f d e f A P P - N V U E
this . _updateDotPosition ( index ) ;
/ / # e n d i f
@ -555,6 +556,8 @@
/ / # i f d e f M P - B A I D U
delayTime = 100 ;
/ / # e n d i f
console . log ( this . currentIndex ) ;
this . currentIndex = 0
setTimeout ( async ( ) => {
for ( let i = 0 ; i < newVal . length ; i ++ ) {
const nodeRes = await this . _getNodeClientRect ( ` #z-tabs-item- ${ i } ` , true ) ;
@ -571,12 +574,13 @@
}
}
this . itemNodeInfos = itemNodeInfos ;
this . tabsContainerWidth = tabsContainerWidth ;
/ / t h i s . t a b s C o n t a i n e r W i d t h = t a i n e r W i d t h ;
this . _updateDotPosition ( this . currentIndex ) ;
} , delayTime )
}
} )
if ( this . initTriggerChange && this . changeTriggerFailed && newVal . length ) {
if ( this . current < newVal . length ) {
this . $emit ( 'change' , this . current , newVal [ this . current ] [ this . valueKey ] ) ;
@ -653,7 +657,7 @@
return unit === 'rpx' ? value + 'rpx' : ( value / 2 ) + 'px' ;
}
}
}
< / script >
@ -669,7 +673,7 @@
/* #endif */
flex - direction : row ;
}
. z - tabs - scroll - view - conatiner {
flex : 1 ;
position : relative ;
@ -680,7 +684,7 @@
/* #endif */
flex - direction : row ;
}
/* #ifndef APP-NVUE */
. z - tabs - scroll - view : : - webkit - scrollbar {
display : none ;
@ -690,7 +694,7 @@
background : transparent ;
}
/* #endif */
. z - tabs - scroll - view {
flex - direction : row ;
position : absolute ;
@ -704,21 +708,21 @@
/* #endif */
flex : 1 ;
}
. z - tabs - list - container {
position : relative ;
/* #ifndef APP-NVUE */
height : 100 % ;
/* #endif */
}
. z - tabs - list , . z - tabs - list - container {
/* #ifndef APP-NVUE */
display : flex ;
/* #endif */
flex - direction : row ;
}
. z - tabs - item {
/* #ifndef APP-NVUE */
display : flex ;
@ -728,7 +732,7 @@
align - items : center ;
padding : 0 px 20 rpx ;
}
. z - tabs - item - title - container {
/* #ifndef APP-NVUE */
display : flex ;
@ -736,50 +740,50 @@
flex - direction : row ;
align - items : center ;
}
. z - tabs - item - title - rpx {
font - size : 30 rpx ;
}
. z - tabs - item - title - px {
font - size : 15 px ;
}
. z - tabs - item - title - disabled {
/* #ifndef APP-NVUE */
cursor : not - allowed ;
/* #endif */
}
. z - tabs - item - badge {
background - color : # ec5b56 ;
color : white ;
border - radius : 100 px ;
}
. z - tabs - item - badge - rpx {
margin - left : 8 rpx ;
font - size : 22 rpx ;
padding : 0 rpx 10 rpx ;
}
. z - tabs - item - badge - px {
margin - left : 4 px ;
font - size : 11 px ;
padding : 0 px 5 px ;
}
. z - tabs - bottom {
position : absolute ;
bottom : 0 ;
left : 0 ;
right : 0 ;
}
. z - tabs - bottom - dot {
border - radius : 100 px ;
}
. z - tabs - left , . z - tabs - right {
/* #ifndef APP-NVUE */
display : flex ;