fix(shoppingTrolley): 修复购物车切换分类后页面初始化问题

- 在切换票种分类后,重置当前选中的票种
- 优化 z-tabs 组件,确保切换分类时正确更新视图
main
Tuzki 7 months ago
parent a88a4a3488
commit a7681e5854
  1. 3
      pages/shoppingTrolley/shoppingTrolley.vue
  2. 62
      uni_modules/z-tabs/components/z-tabs/z-tabs.vue

@ -202,6 +202,7 @@
this.getTicketSortList()
this.$refs.paging.reload(true)
this.current = 0
this.ticketsort = null
this.$refs.zTab.updateSubviewLayout()
}
}
@ -1099,4 +1100,4 @@
}
}
}
</style>
</style>

@ -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>
</scroll-view>
</view>
<view class="z-tabs-right">
<slot name="right" />
</view>
</view>
</template>
@ -48,7 +48,7 @@
const weexAnimation = weex.requireModule('animation');
// #endif
import zTabsConfig from './config/index'
// #ifdef APP-HARMONY
let screenWidth = 0;
// #endif
@ -79,7 +79,7 @@
return uni.upx2px(rpx);
// #endif
}
/**
* z-tabs 标签
* @description 一个简单轻量的tabs标签全平台兼容支持nvuevue3
@ -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 @@
// #endif
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();
})
// #endif
// #ifdef APP-NVUE
this._updateDotPosition(index);
// #endif
@ -555,6 +556,8 @@
// #ifdef MP-BAIDU
delayTime = 100;
// #endif
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;
// this.tabsContainerWidth =tainerWidth;
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: 0px 20rpx;
}
.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: 30rpx;
}
.z-tabs-item-title-px{
font-size: 15px;
}
.z-tabs-item-title-disabled{
/* #ifndef APP-NVUE */
cursor: not-allowed;
/* #endif */
}
.z-tabs-item-badge{
background-color: #ec5b56;
color: white;
border-radius: 100px;
}
.z-tabs-item-badge-rpx{
margin-left: 8rpx;
font-size: 22rpx;
padding: 0rpx 10rpx;
}
.z-tabs-item-badge-px{
margin-left: 4px;
font-size: 11px;
padding: 0px 5px;
}
.z-tabs-bottom{
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.z-tabs-bottom-dot{
border-radius: 100px;
}
.z-tabs-left,.z-tabs-right{
/* #ifndef APP-NVUE */
display: flex;

Loading…
Cancel
Save